Práca s checkbox v React

Práca s checkbox sa vykonáva aj na podobnom princípe, len namiesto atribútu value určujeme atribút checked. Ak sa do tohto atribútu prenesie true - checkbox bude zaškrtnutý, a ak false - nebude zaškrtnutý:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> zaškrtnutý
    <input type="checkbox" checked={false} /> nezaškrtnutý
  </div>;
}

Zvyčajne sa do atribútu checked prenáša stav, ktorý obsahuje logickú hodnotu:

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

Rovnako ako pri práci so vstupmi, ak pevne nastavíte hodnotu atribútu checked - stav checkboxu nebude možné zmeniť. Pre správnu funkčnost budeme pri zmene checkboxu meniť jeho stav na opačnú hodnotu:

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

Môžeme zjednodušiť:

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

Vypíšme stav checkboxu do odseku pomocou ternárneho operátora:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <p>stav: {checked ? 'zaškrtnutý' : 'nezaškrtnutý'}</p>
  </div>;
}