Работа с checkbox в React

Работа с checkbox также осуществляется по схожему принципу, только вместо атрибута 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>;
}