Tengo una aplicación React con un componente principal y varios componentes secundarios. Los componentes secundarios tienen cuadros de texto y otras entradas que cambian muy a menudo (cada tipo de letra crea un cambio de estado).
Tengo un estado en el hijo que se encarga de estas actualizaciones rápidas (para que el estado principal no cambie muy a menudo y el rendimiento no se degrade).
const ParentComponent = () => { const [globalState, setGlobalState] = useState({}) return <> <ChildComponent value={globalState.value1}/> <ChildComponent value={globalState.value2}/> <ChildComponent value={globalState.value3}/> <ChildComponent value={globalState.value4}/> <ChildComponent value={globalState.value5}/> <ChildComponent value={globalState.value6}/> // I need to be able to fetch the childState on click on this button <button /> </> const ChildOne = ({value}) { const [childValue, setChildValue] = useState(value) // In my actual application, there are multiple text boxes here, so i'm maintaining one state for each input return <input type="text" // this function is triggered everytime a letter is entered onChange={(e)=> setChildValue(e.target.value} /> }Necesito actualizar estos datos en mi estado principal al hacer clic en un botón en el padre.
Sé que podemos usar useRef para lograr esto, pero la gente dice que es un antipatrón y debe evitarse. ¿Cómo puedo hacer eso de una manera reactiva?
Editar: más contexto. Tengo varias pestañas en el padre, y en cada pestaña tienes campos de formulario, y necesitas obtener el valor de todos los campos de las pestañas en un momento determinado para hacer una solicitud POST con esos datos. Espero que esto sea útil
No estoy seguro de la estructura de su aplicación, pero la esencia es modificar el estado global de su componente secundario.
Puede hacer esto pasando la función setState del padre al hijo como accesorio.
import React from "react"; export default () => { const [globalState, setGlobalState] = React.useState({ someState: { value: "" } }); return ( <> {JSON.stringify(globalState)} <br /> <ChildComponent value={globalState.someState.value} setGlobalState={(val) => setGlobalState((prev) => ({ ...prev, someState: { value: val } })) } /> </> ); }; const ChildComponent = ({ setGlobalState, value }) => { return ( <input type="text" value={value} onChange={(e) => setGlobalState(e.target.value)} /> ); };Al administrar un estado de formulario complejo, a veces es bueno buscar una biblioteca como react-hook-form, final-form o algo por el estilo.