Estoy usando reaccionar y material ui. Necesito marcar todas las casillas de verificación en una lista marcando una casilla de verificación en un componente principal (es decir, necesito seleccionar todo). Paso el valor correcto de la casilla de verificación principal a través de accesorios, pero eso no desencadena cambios visuales en sus elementos secundarios, aunque sus valores cambien a 'verdadero'. Estoy seguro de que los valores son correctos, porque intenté registrarlos en la consola.
Aquí está el padre:
const [checkboxValue, setCheckboxValue] = useState(false) <Checkbox value={checkboxValue} onChange={e => setCheckboxValue(e.target.checked)}/> {elements.map(element => (<Element selectAll={checkboxValue}/>))}Y aquí está el niño:
function Element(props) { const [checkboxValue, setCheckboxValue] = useState(false) useEffect(() => { setCheckboxValue(props.selectAll) }, [props.selectAll]) return ( <Checkbox value={checkboxValue} onChange={e => setCheckboxValue(e.target.checked)}/>) }estás usando value en lugar de checked
function SingleCheckBox({ selectAll }) { const [checkboxValue, setCheckboxValue] = useState(selectAll); useEffect(() => { setCheckboxValue(selectAll); }, [selectAll]); return ( <Checkbox checked={checkboxValue} onChange={(e) => setCheckboxValue(e.target.checked)} /> ); } export default function App() { const [checkboxValue, setCheckboxValue] = useState(false); return ( <div className="App"> <Checkbox checked={checkboxValue} onChange={(e) => { setCheckboxValue(e.target.checked); }} /> <div> <h2>Other checkboxes</h2> <SingleCheckBox selectAll={checkboxValue} /> </div> </div> ); }