Reactda checkbox bilan ishlash

checkbox bilan ishlash ham o‘xshash printsip asosida amalga oshiriladi, faqat value atributi o‘rniga biz checked atributini ko‘rsatamiz. Agar bu atributga true uzatilsa - checkbox belgilanadi, agar false - belgilanmaydi:

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

Odatda checked atributiga mantiqiy qiymat o‘z ichiga olgan holat (state) uzatiladi:

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

Xuddi inputlar bilan ishlashda bo‘lgani kabi, agar checked atributi qiymati qattiq belgilansa - checkbox holatini o‘zgartirib bo‘lmaydi. To‘g‘ri ishlashi uchun checkbox o‘zgarishida uning holatini unga qarama-qarshi qiymatga o‘zgartiramiz:

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

Soddalashtirishimiz mumkin:

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

Keling, checkbox holatini ternar operator yordamida abzatsda ko‘rsatamiz:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <p>holati: {checked ? 'belgilangan' : 'belgilanmagan'}</p>
  </div>;
}