React-та checkbox-пен жұмыс

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-тың күйін өзгерту мүмкін болмайды. Дұрыс жұмыс істеу үшін өзгеріс кезінде чекбокстың стейтін оған қарама-қарсы мәнге өзгертеміз:

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>;
}