Para resgatar o estado de um checkbox
crie uma variável de estado do tipo verdadeiro ou falso (true/false
) e no checkbox
configure da seguinte forma:
código:
const [check, setCheck] = React.useState(false);
e no componente:
<input
type="checkbox"
checked={check}
onChange={handleChecked}
/>
onde o checked={check}
recebe o valor da inicial e o evento onChange
muda o estado dessa variável de falso para verdadeiro e vice-versa.
O exemplo completo:
function App() {
const [check, setCheck] = React.useState(false);
const handleChecked = (e) => {
setCheck(e.target.checked);
}
return (
<div>
<div>
<input
type="checkbox"
checked={check}
onChange={handleChecked}
/>
</div>
<div>
Status: {check.toString()}
</div>
</div>
);
}
ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
No caso em especifico de material ui no próprio <FormControlLabel />
coloque no control todo o código do componente e nele repasse o valor e o método como descrito acima, exemplo:
const [state, setState] = React.useState({
checkedA: true,
checkedB: true,
checkedF: true,
checkedG: true,
});
const handleChange = (event) => {
setState({ ...state, [event.target.name]: event.target.checked });
};
<FormControlLabel
control={<Checkbox
checked={state.checkedA}
onChange={handleChange}
name="checkedA"
/>}
label="Secondary"
/>
Referencia: Caixa de seleção