Skip to main content
adicionou 174 caracteres ao conteúdo
Fonte Link
novic
  • 36,7mil
  • 4
  • 32
  • 70

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

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:

<FormControlLabel
    control={<Checkbox 
               checked={state.checkedA}
               onChange={handleChange} 
               name="checkedA" 
             />}
    label="Secondary"
  />

Referencia: Caixa de seleção

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

Fonte Link
novic
  • 36,7mil
  • 4
  • 32
  • 70

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:

<FormControlLabel
    control={<Checkbox 
               checked={state.checkedA}
               onChange={handleChange} 
               name="checkedA" 
             />}
    label="Secondary"
  />

Referencia: Caixa de seleção