Estoy tratando de crear un componente de entrada que se pueda usar dinámicamente en cualquier página que almacene el valor de entrada y tenga un atributo getValue que permita que el padre del componente acceda a él. En App.js tengo un objeto llamado "info" que almacena los valores tomados del componente Input. ¿Es el siguiente código una buena implementación para este problema?
Entrada.js
const Input = ({placeholder, getValue}) => ( <input placeholder={placeholder} onChange={({target}) => getValue(target.placeholder, target.value)} /> ) Input.defaultProps = { getValue: (key, value) => {} } export default Input;Aplicación.js
import { useState } from "react"; import Input from "./Input.js"; const App = () => { const [info, setInfo] = useState({}); const addToInfo = (name, val) => { let keyWord = (name.charAt(0).toLowerCase() + name.slice(1)).replace(/\s/g, ""); setInfo(prev => ({...prev, [keyWord]: val})) } return ( <div> <h1>Hello {info.firstName && info.firstName} {info.lastName && info.lastName}</h1> <Input placeholder="First Name" getValue={(name, val) => addToInfo(name, val)}/> <br/> <Input placeholder="Last Name" getValue={(name, val) => addToInfo(name, val)}/> <br/> <Input placeholder="Email" getValue={(name, val) => addToInfo(name, val)}/> <br/> <Input placeholder="Phone Number" getValue={(name, val) => addToInfo(name, val)}/> <br/> <button onClick={() => console.log(info)}>Console Log the Info</button> </div> ); } export default App;Le recomiendo que eche un vistazo a Formik, su enfoque es exactamente la solución a su problema, es decir, pasar el valor a un padre, esta es la estructura básica que usan:
<Formik> {(props) => ( <Form> // This is from Formik // your basic form stuff </Form> )} </Formik> Sobre cómo hacer que el <Form></Form> sea reutilizable, la última vez que le pregunté a uno de sus colaboradores, siéntase libre de echarle un vistazo: Haga de Formik un componente personalizado
Este es el sitio web oficial de Formik ¡ Espero que esto pueda ayudarlo a inspirarse!