0
99
Viewsreaccionar valor de actualización de js de múltiples cuadros de radio y texto
Tengo un problema al actualizar los valores de estado de una clave en particular. Usando múltiples botones de radio y cuadros de texto.
Aquí está mi estado
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"} ], };En el valor de cambio en la radio:
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 } } }) }) }Y este es el envío de parámetros de radio:
{(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> )) ) : ''}¿Le gustaría ayudarme a actualizar algún valor de una clave en particular? En este caso, me gustaría actualizar el valor de la clave 'estado' mediante el botón de opción y la clave 'comentarios' mediante el cuadro de texto. Y el objeto de PStudent se actualizará automáticamente con el nuevo valor después de handleChange() por radio. Gracias por su consideración.
2 answers
Answer question0
Es posible que desee utilizar la clave dinámica y el índice aquí.
La clave dinámica le permitiría reutilizar la misma función para el cambio de valor.
El índice se puede utilizar para identificar el índice del objeto en la matriz.
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> )) ) : ''}Si usa underscore.js en su proyecto, es mejor usar _.cloneDeep() ya que crea una copia independiente del objeto.
0
Puede usar la versión funcional de setState como:
Demo en vivo
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 }; }) }; }); };