Soy nuevo en reaccionar y tengo un escenario en el que tengo varias casillas de verificación en mi formulario. Quiero que el usuario marque todas las casillas de verificación solo y luego habilite el botón Enviar en el formulario. Al cargar, el botón Enviar se desactivará.
¿Como hacer esto?
Aquí está el código que he escrito hasta ahora:
const MultipleCheckboxes = () => { const handleChange = () => { } const allChecked = () => { } return ( <div> <form> <div className="form-check"> <input type="checkbox" className="some-class-name-chk" name="someName" value="Java" id="languageChkDefault" onChange={handleChange} /> <label className="form-check-label" htmlFor="languageChkDefault" > Javascript </label> </div> <div className="form-check"> <input type="checkbox" className="some-class-name-chk" name="someName" value="Angular" id="languageChkDefault" onChange={handleChange} /> <label className="form-check-label" htmlFor="languageChkDefault" > Angular </label> </div> <div className="form-check"> <input type="checkbox" className="some-class-name-chk" name="someName" value="Python" id="languageChkDefault" onChange={handleChange} /> <label className="form-check-label" htmlFor="languageChkDefault" > Python </label> </div> <br /> <button disabled={!allChecked}>Submit</button> </form> </div> ); }; export default MultipleCheckboxes;¿Puede alguien ayudarme con esto? gracias
Puede usar el gancho useState de reacción y establecer su valor predeterminado en falso.
const [state, setstate] = useState(false)Cuando el usuario hace clic en un cuadro de entrada, establezca el estado en verdadero. Puede encontrar algunos problemas cuando el usuario desmarca la casilla, por lo que puede usar una declaración if para manejar el cambio de estado. Por ejemplo:
if (state === true){ setstate(false) }else{ setstate(true) }o simplemente puede usar este código dentro de la función handleChange:
!stateInvierte el estado a verdadero/falso en consecuencia.
Después de eso, puede usar un operador ternario dentro del componente para verificar si el usuario ha marcado todas las casillas, si el usuario no ha marcado todas las casillas, desactive el botón o haga lo contrario. Por ejemplo, si el estado es verdadero (o en otras palabras, si el usuario ha marcado la casilla), represente el botón con estilo normal, de lo contrario, represente el botón deshabilitado:
{state? <button className = "styled"/>: <button disabled className="styled"/>}Por supuesto, solo he comprobado el estado de un cuadro de entrada. Ahora puede simplemente verificar múltiples condiciones declarando múltiples estados para cada cuadro.
{state1 && state2 && state3 ? <button className = "styled"/>: <button disabled className="styled"/>}Si aún no está familiarizado con los operadores ternarios, debe leer este documento Operadores ternarios . Si aún no ha oído hablar de useState y los ganchos de reacción, no dude en consultar la documentación de React. ¡Bienvenido al ecosistema de React!
Esta es mi solución, espero que te ayude.
import { useState, useEffect } from "react"; const MultipleCheckboxes = () => { const [allChecked, setAllChecked] = useState(false); const [checkboxes, setCheckboxes] = useState({ javaCheckbox: false, angularCheckbox: false, pythonCheckbox: false }); function handleChange(e) { setCheckboxes({ ...checkboxes, [e.target.id]: e.target.checked }) } useEffect(() => { const result = Object.values(checkboxes).every(v => v); console.log(result); setAllChecked(result); }, [checkboxes]); return ( <div> <form> <div className="form-check"> <input type="checkbox" className="some-class-name-chk" name="someName" value={checkboxes.javaCheckbox} id="javaCheckbox" onChange={handleChange} /> <label className="form-check-label" htmlFor="languageChkDefault" > Javascript </label> </div> <div className="form-check"> <input type="checkbox" className="some-class-name-chk" name="someName" value={checkboxes.angularCheckbox} id="angularCheckbox" onChange={handleChange} /> <label className="form-check-label" htmlFor="languageChkDefault" > Angular </label> </div> <div className="form-check"> <input type="checkbox" className="some-class-name-chk" name="someName" value={checkboxes.pythonCheckbox} id="pythonCheckbox" onChange={handleChange} /> <label className="form-check-label" htmlFor="languageChkDefault" > Python </label> </div> <br /> <button disabled={!allChecked}>Submit</button> </form> </div> ); }; export default MultipleCheckboxes;