Kufanya Kazi na Checkbox katika React

Kufanya kazi na checkbox pia hufanyika kulia kanuni sawa, lakini badala ya sifa value tunataja sifa checked. Ikiwa utaweka thamani true kwenye sifa hii - basi checkbox itakuwa imechaguliwa, na ikiwa false - haitakuwa imechaguliwa:

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

Kawaida thamani ya sifa checked hutoka kwenye hali (state), inayobeba thamani ya kimantiki:

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

Vilevile, kama ilivyo kwenye kufanya kazi na viingilio, ikiwa utaweka thamani ngwa kwenye sifa checked - hali ya checkbox haitaweza kubadilishwa. Ili ifanye kazi ipasavyo, kwa kila mabadiliko ya checkbox tutabadilisha hali yake kwa thamani tofauti kabisa na ile iliyopo:

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

Tunaweza kurahisisha:

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

Wacha tuonyeshe hali ya checkbox kwenye aya, tukitumia opereta ya ternary:

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