React-da checkbox bilen işlemek

checkbox bilen işlemek hem meñzeş princip boýunça amala aşyrylýar, diňe value atributy ýerine checked atributyny görkezýäris. Eger bu atributa true geçirilse - checkbox bellikli bolar, eger false - bellikli bolmaz:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> bellikli
    <input type="checkbox" checked={false} /> bellikli däl
  </div>;
}

Adatça checked atributyna mätäçlik bahasyny saklaýan ýagdaý geçirilýär:

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

Indamlara işlemekdeki ýaly, eger checked atributynyň bahasy berk belgilense - checkbox-ynyň ýagdaýyny üýtgetmek mümkin bolmaz. Dogry işlemek üçin onuň ýagdaýyny üýtgetmek bilen ony ters baha çalşyrmaly:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  function handleChange() {
    setChecked(!checked); // ýagdaýy tersine öwürýäris
  }
  
  return <div>
    <input type="checkbox" checked={checked} onChange={handleChange} />
  </div>;
}

Ýönekeýleşdirip bileris:

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

Geliň, checkbox-ynyň ýagdaýyny tertipçi ulanyp, abzasda görkezeliň:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <p>ýagdaýy: {checked ? 'bellikli' : 'bellikli däl'}</p>
  </div>;
}