checkbox-თან მუშაობა React-ში

checkbox-თან მუშაობა ასევე ხორციელდება მსგავსი პრინციპით, მხოლოდ value ატრიბუტის ნაცვლად ჩვენ მივუთითებთ checked ატრიბუტს. თუ ამ ატრიბუტს გადავცემთ true - checkbox მონიშნული იქნება, ხოლო თუ false - არ იქნება მონიშნული:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> მონიშნული
    <input type="checkbox" checked={false} /> არაა მონიშნული
  </div>;
}

ჩვეულებრივ checked ატრიბუტში გადაეცემა state, რომელიც შეიცავს ლოგიკურ მნიშვნელობას:

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

ისევე, როგორც ინპუტებთან მუშაობისას, თუ მყარად დავაყენებთ checked ატრიბუტის მნიშვნელობას - checkbox-ის მდგომარეობის შეცვლა ვეღარ მოხდება. კორექტული მუშაობისთვის, checkbox-ის ცვლილებაზე მის state-ს საპირისპირო მნიშვნელობაზე ვცვლით:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  function handleChange() {
    setChecked(!checked); // ვაბრუნებთ state-ს
  }
  
  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>;
}