Darbība ar checkbox React

Darbība ar checkbox tiek veikta arī pēc līdzīga principa, tikai atribūta value vietā mēs norādām atribūtu checked. Ja šajā atribūtā padod true - tad checkbox būs atzīmēts, un ja false - netiks atzīmēts:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> atzīmēts
    <input type="checkbox" checked={false} /> neatzīmēts
  </div>;
}

Parasti atribūtā checked tiek padots state, satur loģisko vērtību:

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

Tāpat kā strādājot ar input, ja stingri iestatīsiet atribūta checked vērtību - checkbox stāvokli nevarēs mainīt. Lai darbotos pareizi, pēc checkbox izmaiņām mainīsim tā state uz pretējo vērtību:

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

Varam vienkāršot:

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

Izvadīsim checkbox stāvokli rindkopā, izmantojot ternāro operatoru:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <p>stāvoklis: {checked ? 'atzīmēts' : 'neatzīmēts'}</p>
  </div>;
}