Tengo un componente de usuario y un componente InputField en React. Sé que mi código es incorrecto, pero debería mostrar lo que planeo hacer. En lugar de tener varios enlaces useState para cada propiedad del usuario, quiero actualizar un objeto de usuario donde un campo de entrada puede actualizar una propiedad específica del objeto de usuario.
const User = () => { const [user, setUser] = useState({ name: "", email: "", }); return ( <> <InputField name="name" value={user.name} onChange={() => setUser({ ...user, name: value })} /> <InputField name="email" value={user.email} onChange={() => setUser({ ...user, email: value })} /> </> ); }; const InputField = ({ name, value }) => { const [value, setValue] = useState(""); return ( <input type="text" id={name} value={value} onChange={(e) => setValue(e.target.value)} /> ); }; Creo que lo que estoy haciendo con la propiedad de value es correcto, pero onChange no es correcto y este es mi problema. ¿Cómo puedo pasar setValue al componente Usuario para que actualice el nombre o el correo electrónico?
No está obteniendo onChange desde los accesorios en el componente InputField.
const InputField = ({ name, value, onChange }) => { return ( <input type="text" id={name} value={value} onChange={(e) => setValue(e.target.value)} /> ); };Y luego necesitaría obtener el valor pasado desde el componente secundario:
<InputField name="name" value={user.name} onChange={(value) => setUser({ ...user, name: value })} /> <InputField name="email" value={user.email} onChange={(value) => setUser({ ...user, email: value })} />Creo que esto debería solucionarlo.
Debe mover su lógica de cambio al componente principal. Entonces puede hacer una función de cambio en el padre y pasarla al campo de entrada. También usaría el atributo de nombre de objetivos para establecer el estado en lugar de establecer una identificación en la entrada. Entonces algo como lo siguiente:
const InputField = ({ name, value, onChange }) => { return ( <input type="text" name={name} value={value} onChange={onChange} /> ); }; const User = () => { const [user, setUser] = useState({ name: "", email: "", }); const onChange = (e) => { setUser({ ...user, [e.target.name]: e.target.value }) } return ( <> <InputField name="name" value={user.name} onChange={onChange} /> <InputField name="email" value={user.email} onChange={onChange} /> </> ); };