Tengo un formulario que obtiene sus campos de entrada dinámicamente, puede tener cientos de campos, por lo que no puedo crear un estado individualmente, estaba planeando hacer algo como usar un objeto usando la clave única de un campo de formulario, pero necesito ayuda.
Supongamos que el formulario tiene campos como este.
<form> {inputFields.map((i) => { <input type={i.type} /> })} </form>Ahora necesitaría un estado como el de abajo
inputState = { "INPUT_FIELD_NAME1": "INPUT FIELD VALUE 1", "INPUT_FIELD_NAME2": "INPUT FIELD VALUE 2", "INPUT_FIELD_NAME3": "INPUT FIELD VALUE 3", } Necesito ayuda con esto, ¿cómo configuro valores de tal manera en mi entrada onChange y cómo accedo a los valores del estado y los uso para el campo de entrada correspondiente?
Según mi comprensión y conocimiento, debe actualizar su estructura dinámica como se indica a continuación
<form> {inputFields.map((i) => ( <input type={i.type} name={`INPUT_FIELD_NAME${i.id}`} onChange={handleChange} /> ))} </form>También tiene que actualizar su estado de reacción en el cambio de entrada como
const [inputState, setinputState] = useState({}); const handleChange = (e) => { const { name, value } = e.target; setinputState({ ...inputState, [name]: value }); };¡Espero que funcione para ti! Gracias.
Yo haría algo como esto:
const [form, setForm] = useState({}) const onChange = (event) => { const { id, value } = event.target setForm((prev) => ({ ...prev, [id]: value })) } <form> {inputFields.map((i) => { <input key={i.id} onChange={onChange} id={i.id} type={i.type} /> })} </form>La identificación debe ser única, también puede usar la propiedad "nombre" en lugar de "identificación"