React-da checkbox ilə işləmək

checkbox ilə işləmək də oxşar prinsipə əsaslanır, yalnız value atributu əvəzinə biz checked atributunu göstəririk. Əgər bu atributa true ötürülərsə - checkbox qeyd olunacaq, əgər false - qeyd olunmayacaq:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> qeyd olunub
    <input type="checkbox" checked={false} /> qeyd olunmayib
  </div>;
}

Adətən checked atributuna məntiqi dəyər saxlayan state ötürülür:

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

Inputlarla işdə olduğu kimi, əgər checked atributunun dəyəri sərt şəkildə təyin olunarsa - checkbox-in vəziyyətini dəyişmək mümkün olmayacaq. Düzgün işləməsi üçün dəyişiklik zamanı onun state-ni əks dəyərə dəyişəcəyik:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  function handleChange() {
    setChecked(!checked); // state-i tərsinə çeviririk
  }
  
  return <div>
    <input type="checkbox" checked={checked} onChange={handleChange} />
  </div>;
}

Sadələşdirə bilərik:

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

Gəlin checkbox-in vəziyyətini abzasa çıxaraq, üçlü operator istifadə edərək:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <p>vəziyyət: {checked ? 'qeyd olunub' : 'qeyd olunmayib'}</p>
  </div>;
}