Reactда checkbox билан ишлаш

checkbox билан ишлаш ҳам ўхшаш принциип асосида амалга оширилади, фақат value атрибути ўрнига биз checked атрибутини кўрсатамиз. Агар бу атрибутга true берилса - checkbox белгиланган бўлади, агар 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 атрибутининг қиймати қаттиқ белгиланса - checkboxнинг ҳолатини ўзгартириб бўлмайди. Тўғри ишлаши учун checkbox ўзгарганида унинг стейтини ўзига қарама-қарши қийматга ўзгартирамиз:

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>;
}

Келгила, checkboxнинг ҳолатини тернар оператори ёрдамида абзацга чиқарайлик:

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