Quiero activar el botón cuando la casilla de verificación esté activa. Hice esto para una casilla de verificación, pero ¿cómo puedo hacerlo con 2 casillas de verificación? El botón no debe estar habilitado si incluso una de las casillas de verificación no está marcada
Así es como la actividad del botón que hago con una sola casilla de verificación:
import {useState} from "React"; export default function App() { const [change, setChange] = useState(true); const buttonHandler = () => { setChange(!change) } return ( <> <button disabled={change}>button</button> <input type="checkbox" onChange={buttonHandler}/> <input type="checkbox" onChange={buttonHandler}/> <> ); }Debe mantener el estado de ambas casillas de verificación para asegurarse de que estén marcadas antes de habilitar el botón:
import {useState} from "React"; export default function App() { const [checkbox1, setCheckbox1] = useState(false); const [checkbox2, setCheckbox2] = useState(false); const button1Handler = () => { setCheckbox1(current => !current); } const button2Handler = () => { setCheckbox2(current => !current); } return ( <> <button disabled={!checkbox1 || !checkbox2}>button</button> <input type="checkbox" checked={checkbox1} onChange={button1Handler}/> <input type="checkbox" checked={checkbox2} onChange={button2Handler}/> <> ); }Lo que desea es un estado que contenga una matriz de valores, cada uno de una casilla de verificación. Preferiría una matriz para que solo tenga un controlador de botón, y agregar más casillas de verificación debería ser fácil.
import {useState} from "React"; export default function App() { const [change, setChange] = useState([true, true]); const buttonHandler = (index) => { const newState = [...change]; newState[index] = !newState[index] setChange(newState) } return ( <> <button disabled={!change[0] && !change[1]}>button</button> <input type="checkbox" value={change[0]} onChange={()=>buttonHandler(0)}/> <input type="checkbox" value={change[1]} onChange={()=>buttonHandler(1)}/> <> ); }