El botón está deshabilitado al principio y solo se habilita después de marcar la casilla de verificación de entrada. El problema que tengo es que onClick en mi botón no funciona incluso después de configurar el valor de deshabilitado en falso, el método onClick funciona cuando elimino la etiqueta deshabilitada.
const [show, setShow] = useState(false) useEffect(() =>{ //I do an api call here but for simplicity just assume the modal always shows at the start setShow(true) }, []) //Close the modal const handleClose = () => setShow(false); //This function will make the button available depending if the user has accepted the conditions. const enableButton = (enabled) =>{ if (enabled){ document.getElementById("btn").disabled = false; } else document.getElementById("btn").disabled = true; <Modal show={show} onHide={() => history.push("/")}> <Modal.Header closeButton> <Modal.Title>Gebruiksvoorwaarden</Modal.Title> </Modal.Header> <Modal.Body> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </Modal.Body> <Modal.Body> <input id="check" type="checkbox" onChange={() => enableButton(document.getElementById("check").checked)}></input> </Modal.Body> <Modal.Footer> <Button id="btn" variant="danger" disabled onClick={() => handleClose()} > Accept </Button> </Modal.Footer> </Modal>El modal debe cerrarse después de presionar el botón. ¡Gracias por ayudar!
Estás pasando un accesorio disabled sin valor, lo que significa que el valor siempre será true .
Aparentemente no entiendes bien cómo funcionan las propiedades de los componentes en ReactJS . La forma en que intenta cambiar la propiedad no dará el efecto esperado porque está cambiando la propiedad del objeto DOM, no el componente .
Puede intentar almacenar, cambiar y pasar su valor disabled usando useState de esta manera:
const [show, setShow] = useState(false); const [disabled, setDisabled] = useState(true); useEffect(() =>{ setShow(true); }, []); const handleClose = () => setShow(false); const toggleButton = () => setDisabled(!disabled); return ( <Modal show={show} onHide={() => history.push("/")}> <Modal.Header closeButton> <Modal.Title>Gebruiksvoorwaarden</Modal.Title> </Modal.Header> <Modal.Body> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </Modal.Body> <Modal.Body> <input id="check" type="checkbox" onChange={toggleButton}></input> </Modal.Body> <Modal.Footer> <Button id="btn" variant="danger" disabled={disabled} onClick={handleClose}> Accept </Button> </Modal.Footer> </Modal> );