Checkboxien käsittely Reactissa

Checkboxien käsittely tapahtuu samankaltaisella periaatteella, vain value-attribuutin sijasta määritämme checked-attribuutin. Jos tähän attribuuttiin välitetään true - checkbox on valittu, ja jos false - se ei ole valittu:

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

Yleensä checked-attribuuttiin välitetään tila, joka sisältää loogisen arvon:

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

Samoin kuin syötekenttien käsittelyssä, jos checked-attribuutin arvo asetetaan kovakoodatusti - checkboxin tilaa ei voi muuttaa. Toimiakseen oikein, muutamme checkboxin muuttuessa sen tilan vastakkaiseksi arvoksi:

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

Voimme yksinkertaistaa:

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

Esitetään checkboxin tila kappaleessa, käyttäen ehtolausetta:

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