Работа со checkbox во React

Работата со checkbox исто така се спроведува по сличен принцип, само што наместо атрибутот value го одредуваме атрибутот checked. Ако во овој атрибут се пренесе true - тогаш checkbox-от ќе биде означен, а ако false - нема да биде означен:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> означен
    <input type="checkbox" checked={false} /> неозначен
  </div>;
}

Обично во атрибутот checked се пренесува state, кој содржи логичка вредност:

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

Исто како и при работа со input-и, ако ригорозно се постави вредноста на атрибутот checked - состојбата на checkbox-от нема да може да се промени. За правилна работа, при промена на checkbox-от, ќе го менуваме неговиот state во спротивна вредност:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  function handleChange() {
    setChecked(!checked); // го инвертираме state-от
  }
  
  return <div>
    <input type="checkbox" checked={checked} onChange={handleChange} />
  </div>;
}

Можеме да поедноставиме:

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

Ајде да ја прикажеме состојбата на checkbox-от во параграф, користејќи тернарен оператор:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <p>состојба: {checked ? 'означен' : 'неозначен'}</p>
  </div>;
}