Εργασία με checkbox στο React

Η εργασία με τα checkbox γίνεται επίσης με παρόμοια αρχή, μόνο που αντί για το χαρακτηριστικό value ορίζουμε το χαρακτηριστικό checked. Εάν σε αυτό το χαρακτηριστικό περάσουμε true - τότε το checkbox θα είναι επιλεγμένο, ενώ εάν false - δεν θα είναι επιλεγμένο:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> επιλεγμένο
    <input type="checkbox" checked={false} /> μη επιλεγμένο
  </div>;
}

Συνήθως στο χαρακτηριστικό checked περνάμε state, που περιέχει λογική τιμή:

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

Όπως και στην εργασία με inputs, εάν ορίσουμε άκαμπτα την τιμή του χαρακτηριστικού checked - η κατάσταση του checkbox δεν θα μπορεί να αλλάξει. Για σωστή λειτουργία θα αλλάζουμε κατά την αλλαγή του checkbox το state του στην αντίθετη τιμή του:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  function handleChange() {
    setChecked(!checked); // αντιστρέφουμε το state
  }
  
  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>;
}