Рад са checkbox у React

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

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

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

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

Исто као и при раду са уносима, ако се чврсто зада вредност атрибута checked - стање чекбокса се неће моћи променити. За исправан рад ћемо при промени чекбокса мењати његов стејт на супротну вредност:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  function handleChange() {
    setChecked(!checked); // инвертујемо стејт
  }
  
  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>;
}

Хајде да прикажемо стање чекбокса у пасус, користећи тернарни оператор:

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