Praca z checkbox w React

Praca z checkbox również odbywa się na podobnej zasadzie, tylko zamiast atrybutu value podajemy atrybut checked. Jeśli przekażemy do tego atrybutu true - to checkbox będzie zaznaczony, a jeśli false - nie będzie zaznaczony:

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

Zwykle do atrybutu checked przekazywany jest stan, zawierający wartość logiczną:

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

Podobnie jak przy pracy z inputami, jeśli sztywno ustawimy wartość atrybutu checked - stanu checkboxa nie będzie można zmienić. Dla poprawnej działania przy każdej zmianie checkboxa zmieniajmy jego stan na przeciwny do jego wartości:

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

Możemy uprościć:

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

Wyświetlmy stan checkboxa w akapicie, używając operatora trójargumentowego:

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