Tengo un componente de entrada que hace la validación. En una forma reducida se ve así:
const InputField = ({validation, name}) => { const [value, setValue] = useState(""); const [error, setError] = useState(false); const handleChange = (e) => { let errors = 0; if (validation.includes("required") && val === "") { errors++; } if (errors > 0) { setError(true); } else { setError(false); } setValue(e.target.value) } return ( <input type="text" value={value} onChange={handleChange} name={name} /> ); };Si estoy usando este componente varias veces en un padre como
const Parnet = () => { // 🔥🔥🔥 help required here const groupedErrorValueBool = true; return ( <> <InputField name="Name" validation="required" /> <InputField name="Email" validation="required" /> <InputField name="Birthday" validation="required" /> <button disabled={groupedErrorValueBool}>Submit</button> </> );¿Cómo puedo obtener un valor agrupado de errores? Me gusta: Quiero deshabilitar un botón de envío, si algún campo tiene algún error.
Idealmente, sé qué componente tiene un error, para poder imprimir comentarios significativos.
El estado groupedErrorValueBool debería estar en su componente principal, luego le da el controlador de estado a los niños
const InputField = ({ validation, setGroupErrorBool }) => { const [value, setValue] = useState(""); const [error, setError] = useState(false); const handleChange = (e) => { let errors = 0; if (validation.includes("required") && val === "") { errors++; } if (errors > 0) { setError(true); setGroupErrorBool(true); } else { setError(false); } setValue(e.target.value); }; return <input type="text" value={value} onChange={handleChange} />; }; const Parent = () => { const [groupErrorBool, setGroupErrorBool] = useState(false); return ( <> <InputField validation="required" setGroupErrorBool={setGroupErrorBool} /> <InputField validation="required" setGroupErrorBool={setGroupErrorBool} /> <button disabled={groupErrorBool}>Submit</button> </> ); };Es cierto que las cosas de forma pueden ser muy difíciles. Es por eso que uso "Formik" para mis formularios React. Creo que Formik utilizará un elemento de control de formulario principal/general con la técnica de accesorios representados para exponer los controladores de estado de formulario, que también podría ser algo que puede probar usted mismo
Podrías hacerlo así:
const InputField = ({validation, onErrorChanged}) => { const [value, setValue] = React.useState("test"); const [error, setError] = React.useState(false); const handleChange = (e) => { let errors = 0; if (validation.includes("required") && e.target.value === "") { errors++; } if (errors > 0 && !error) { // we have error(s) and the error state is set to false setError(true); onErrorChanged(true); } else if (errors === 0 && error){ // we don't have any error but the error state is set to true setError(false); onErrorChanged(false); } setValue(e.target.value) } return ( <input type="text" value={value} onChange={handleChange} /> ); }; const InputGroup = () => { const [errors, setErrors] = React.useState(0); function errorChanged(hasError){ if(hasError) setErrors(errors + 1); else setErrors(errors - 1); } return ( <React.Fragment> <InputField validation="required" onErrorChanged={errorChanged}/> <InputField validation="required" onErrorChanged={errorChanged}/> <InputField validation="required" onErrorChanged={errorChanged}/> <button disabled={errors === 0 ? false: true}>Submit</button> </React.Fragment> ); } ReactDOM.render(<InputGroup/>, document.getElementById('root')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root"></div>Debe pasar una función de devolución de llamada a los niños que se llama cada vez que cambia el estado de error en un elemento secundario, es decir
error se establece actualmente en falseerror se establece actualmente en true En el componente principal, necesitamos un estado de errors que es un contador que cuenta la cantidad de componentes secundarios que tienen errores. Además, necesitamos definir la función de devolución de llamada mencionada anteriormente de modo que incremente el contador siempre que un componente secundario informe que tiene un error y disminuya el contador cuando un componente secundario informe que ha cambiado al estado no error . Si el contador es igual a cero, sabemos que no tenemos ningún error en ninguno de nuestros componentes secundarios, si no es nulo, sabemos cuántos componentes secundarios tienen errores.