Arbejde med checkbox i React

Arbejde med checkbox foregår også efter et lignende princip, bare i stedet for attributten value angiver vi attributten checked. Hvis du overfører true til denne attribut - vil checkboxen være markeret, og hvis false - vil den ikke være markeret:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> markeret
    <input type="checkbox" checked={false} /> ikke markeret
  </div>;
}

Normalt overføres en state til attributten checked, som indeholder en boolsk værdi:

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

Ligesom ved arbejde med inputfelter, hvis værdien af attributten checked er hårdt sat - kan checkboxens tilstand ikke ændres. For korrekt funktion skal vi ved ændring af checkboxen ændre dens state til den modsatte værdi:

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

Vi kan forenkle:

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

Lad os udskrive checkboxens tilstand i et afsnit, ved hjælp af den ternære operator:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <p>tilstand: {checked ? 'markeret' : 'ikke markeret'}</p>
  </div>;
}