Darbas su checkbox React

Darbas su checkbox taip pat vykdomas pagal panašų principą, tik vietoj atributo value mes nurodome atributą checked. Jei šiam atributui perduosite true - tada checkbox bus pažymėtas, o jei false - nebus pažymėtas:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> pažymėtas
    <input type="checkbox" checked={false} /> nepažymėtas
  </div>;
}

Paprastai į atributą checked perduodama būsena (state), kuriame yra loginė reikšmė:

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

Taip pat, kaip ir dirbant su input laukais, jei standžiai nustatysite atributo checked reikšmę - checkbox būsenos nebus galima pakeisti. Kad veiktų teisingai, keisdami checkbox būseną, nustatysime jos priešingą reikšmę:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  function handleChange() {
    setChecked(!checked); // apverčiame būseną (state)
  }
  
  return <div>
    <input type="checkbox" checked={checked} onChange={handleChange} />
  </div>;
}

Galime supaprastinti:

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

Išveskime checkbox būseną į pastraipą, naudodami ternary operatorių:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <p>būsena: {checked ? 'pažymėtas' : 'nepažymėtas'}</p>
  </div>;
}