Rad sa checkbox u Reactu

Rad sa checkbox takođe se obavlja po sličnom principu, samo umesto atributa value mi navodimo atribut checked. Ako se u ovaj atribut prosledi true - onda će checkbox biti označen, a ako false - neće biti označen:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> označen
    <input type="checkbox" checked={false} /> nije označen
  </div>;
}

Obično se u atribut checked prosleđuje state, koji sadrži logičku vrednost:

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

Isto kao i pri radu sa input poljima, ako se kruto postavi vrednost atributa checked - stanje checkboxa se neće moći promeniti. Za ispravan rad ćemo po promeni checkboxa menjati njegov state na suprotnu vrednost:

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

Možemo pojednostaviti:

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

Hajde da ispišemo stanje checkboxa u pasus, koristeći ternarni operator:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <p>stanje: {checked ? 'označen' : 'nije označen'}</p>
  </div>;
}