Soy muy nuevo en React y esta es mi primera tarea en un proyecto existente..! Bien, llegando al punto, entonces hay un componente principal ContactForm.js que tiene un componente secundario UserInfoStep.js. Hay un botón en el componente principal que necesito habilitar/deshabilitar en función de un botón de alternar en el componente secundario. He intentado usar callback pero me da error..
TypeError: no se pueden leer las propiedades de undefined (leyendo 'callbackFunction')
Formulario de contacto.js
const callbackFunction = (isChecked) => { //do enable/disable this.Button.disabled = isChecked; }; function ContactForm() { const [buttonState, setButtonState] = useState(true); const { PUID,FirstName, LastName, EurofinsLegalEntity, EurofinsBusinessUnit, StartDate, EndDate, frequency, test, exp, signed, laptop, transfer, existing, newL, categories} = state; const steps = [ <UserInfoStep parentCallback = {this.callbackFunction} {...{ PUID,FirstName, LastName, EurofinsLegalEntity, EurofinsBusinessUnit, StartDate, EndDate}} />]; return ( <ContactFormContext.Provider value={{ dispatch }}> //some code removed <Button disabled={buttonState} type="submit" className={classes.button} color="primary" variant="outlined" onClick={e => { e.preventDefault(); if (isLast) { handleSubmit(); } else { goForward(); } }} > {isLast ? "Submit" : "Next"} </Button> //some code removed </ContactFormContext.Provider> ); } export default ContactForm;UserInfoStep.js
function UserInfoStep ({ PUID, FirstName, LastName, EurofinsLegalEntity, EurofinsBusinessUnit, StartDate, EndDate }) { const { dispatch } = useContext(ContactFormContext); const [checked, setChecked] = useState(false); const handleChange = () => { setChecked((prev) => !prev); //as soon as this is checked, enable the button in contactForm sendData(checked); }; const sendData = (isChecked) => { this.parentCallback(isChecked); //Enabled = isChecked; }; return( //some controls <FormControlLabel control={<Switch checked={checked} onChange={handleChange} />} /> ); } export default UserInfoStep;Está utilizando componentes de función, por lo que no es necesario usar this .
Su estado no se está utilizando porque...
... su función de devolución de llamada está fuera del componente y está tratando de configurar this.Button que no existe.
Entonces (esta es una versión muy simplificada de su código): mueva el controlador dentro del componente para que pueda actualizar el estado directamente, y use el estado del button para informar a la propiedad disabled del botón en qué estado debería estar.
const { useState } = React; function UserInfoStep({ handleChange }) { return ( <button onClick={handleChange}>Toggle parent button</button> ); } function ContactForm() { const [ buttonState, setButtonState ] = useState(true); function handleChange() { setButtonState(!buttonState); } return ( <div> <div class="child"> Child component <UserInfoStep handleChange={handleChange} /> </div> <div class="parent"> Parent component <button disabled={buttonState}> Parent button </button> </div> </div> ); }; ReactDOM.render( <ContactForm />, document.getElementById('react') ); .child, .parent { margin: 0.5em 0 0.5em 0; } .child button:hover { cursor: pointer; } .parent button { background-color: #b3ffcc; } .parent button:disabled { background-color: #ff9980; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>Puede tener una función dentro del componente ContactForm que alterna el buttonState. Luego puede pasar esa función como accesorio al componente secundario y llamar a esa función para habilitar/deshabilitar el botón.
en el componente ContactForm Por ejemplo:
const toggler = () =>{ setButtonState(!buttonState); }pase esta función de alternancia como accesorio al componente secundario y adjúntela al controlador onClick del botón de alternancia.