Checkbox'ide kasutamine Reactis

Checkbox'idega töötamisel rakendatakse samalaadset põhimõtet, kuid value atribuudi asemel määrame atribuudi checked. Kui sellele atribuudile anda true - siis checkbox on märgitud ja kui false - siis pole märgitud:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> märgitud
    <input type="checkbox" checked={false} /> pole märgitud
  </div>;
}

Tavaliselt antakse atribuudile checked state, mis sisaldab loogilist väärtust:

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

Samuti, nagu input'itega töötamisel, kui atribuudi checked väärtus on jäigalt määratud - siis checkbox'i olekut ei saa muuta. Korrektseks tööks muudame checkbox'i muutumisel selle state'i vastupidiseks väärtuseks:

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

Saame lihtsustada:

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

Kuvame checkbox'i oleku lõigus, kasutades ternaaroperaatorit:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <p>olek: {checked ? 'märgitud' : 'pole märgitud'}</p>
  </div>;
}