從多個單選框和文本框中反應 js 更新值

Question

我有更新特定鍵的狀態值的問題。 使用多個單選按鈕和文本框。

這是我的狀態

this.state = {
        PStudent:[{"flag_sts":1,"id":8472229,"remark":null,"status":"P","studentid":"12010013"},
                  {"flag_sts":1,"id":8472218,"remark":null,"status":"P","studentid":"12108051"},
                  {"flag_sts":1,"id":8472219,"remark":null,"status":"P","studentid":"12108052"}
                ],
    };

在收音機上更改值：

const handleChange = (e,studentid) =>{
      this.setState({
        data: this.state.PStudent.map(item=>{
            if (item.studentid !== e.target.name) {
                return item;
            }else{
                return{
                    studentid: studentid,
                    status : e.target.value
                }
            }
        })
      })   
    }

這是發送參數形式無線電：

{(Object.keys(this.state.PStudent).length > 0) ? (
            this.state.PStudent.map((v)=>(
              <tr>
                <td>{v.studentid}</td>
                <td><input type="radio" name={v.studentid} value="P" onChange={(e)=>handleChange(e,v.studentid)} defaultChecked={(v.status == "P") ? true:false} /> </td>
                <td><input type="radio" name={v.studentid} value="A" onChange={(e)=>handleChange(e,v.studentid)} defaultChecked={(v.status == "A") ? true:false} /> </td>
                <td><input type="text" name="remarks" value="" /> </td>
              </tr>
            ))
          ) : ''}

您想幫助我如何更新特定鍵的某些值嗎？ 在這種情況下，我想通過單選按鈕更新鍵“狀態”的值，並通過文本框鍵“備注”更新值。 在通過無線電執行 handleChange() 后，來自 PStudent 的對象將自動更新為新值。 感謝您的考慮。

Answer 1

您可能希望在此處使用動態鍵和索引。

動態鍵將允許您對值更改重復使用相同的函數。

索引可用於標識對象在數組中的索引。

const handleChange = (e, index, field) =>{
  const newPStudent = _.cloneDeep(this.state.PStudent);  // or you can use this.state.PStudent.map(i => I);
  newPStudent[index][field] = e.target.value
  this.setState({PStudent: newPStudent})
}



{(Object.keys(this.state.PStudent).length > 0) ? (
        this.state.PStudent.map((v, index)=>(
          <tr>
            <td>{v.studentid}</td>
            <td><input type="radio" name={v.studentid} value="P" onChange={(e)=>handleChange(e, index, 'status')} defaultChecked={(v.status == "P") ? true:false} /> </td>
            <td><input type="radio" name={v.studentid} value="A" onChange={(e)=>handleChange(e, index, 'status')} defaultChecked={(v.status == "A") ? true:false} /> </td>
            <td><input type="text" name="remarks" value="" onChange={(e)=>handleChange(e, index, 'remark')}/> </td>
          </tr>
        ))
      ) : ''}

如果您在項目中使用 underscore.js，最好使用 _.cloneDeep()，因為它會創建對象的獨立副本。

Answer 2

您可以將setState功能版本用作：

現場演示

  handleChange = (e, studentid) => {
    const status = e.target.value;
    this.setState((state) => {
      return {
        PStudent: state.PStudent.map((item) => {
          if (item.studentid !== e.target.name) return item;
          else return { ...item, status };
        })
      };
    });
  };