Lucrul cu checkbox în React

Lucrul cu checkbox de asemenea se realizează după un principiu similar, doar că în loc de atributul value indicăm atributul checked. Dacă în acest atribut este transmis true - atunci checkbox-ul va fi bifat, iar dacă false - nu va fi bifat:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> bifat
    <input type="checkbox" checked={false} /> nebifat
  </div>;
}

De obicei, în atributul checked este transmis un starea (state), care conține o valoare logică:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} />
  </div>;
}

La fel ca și în cazul lucrului cu input-uri, dacă stabiliți rigid valoarea atributului checked - starea checkbox-ului nu va putea fi schimbată. Pentru o funcționare corectă, la modificarea checkbox-ului, vom schimba starea lui în valoarea opusă acesteia:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  function handleChange() {
    setChecked(!checked); // inversăm starea
  }
  
  return <div>
    <input type="checkbox" checked={checked} onChange={handleChange} />
  </div>;
}

Putem simplifica:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
  </div>;
}

Să afișăm starea checkbox-ului într-un paragraf, folosind operatorul ternar:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <p>starea: {checked ? 'bifat' : 'nebifat'}</p>
  </div>;
}