A checkbox kezelése Reactben

A checkbox kezelése hasonló elv alapján történik, csak a value attribútum helyett a checked attribútumot használjuk. Ha ebbe az attribútumba true-t adunk meg - akkor a checkbox be lesz jelölve, ha pedig false-t - akkor nem lesz bejelölve:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> bejelölt
    <input type="checkbox" checked={false} /> nincs bejelölve
  </div>;
}

Általában a checked attribútumba egy állapot (state) kerül, ami logikai értéket tartalmaz:

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

Úgy, ahogyan a bemeneti mezők (input) esetében is, ha mereven beállítjuk a checked attribútum értékét - a checkbox állapota nem változtatható meg. A megfelelő működés érdekében a checkbox változásakor állítsuk be az állapotát az ellenkezőjére:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  function handleChange() {
    setChecked(!checked); // megfordítjuk az állapotot
  }
  
  return <div>
    <input type="checkbox" checked={checked} onChange={handleChange} />
  </div>;
}

Leegyszerűsíthetjük:

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

Jelenítsük meg a checkbox állapotát egy bekezdésben (paragraph), a ternális operátor segítségével:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <p>állapot: {checked ? 'bejelölt' : 'nincs bejelölve'}</p>
  </div>;
}