Кор бо checkbox дар React

Кор бо 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>;
}