我有更新特定鍵的狀態值的問題。使用多個單選按鈕和文本框。
這是我的狀態
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 的物件將自動更新為新值。感謝您的考慮。
uj5u.com熱心網友回復：
您可能希望在此處使用動態鍵和索引。
動態鍵將允許您對值更改重復使用相同的函式。
索引可用于標識物件在陣列中的索引。
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()，因為它會創建物件的獨立副本。
uj5u.com熱心網友回復：
您可以使用setStateas 的功能版本：
現場演示
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 };
})
};
});
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/323688.html
標籤：javascript 节点.js 反应