Pengendalian Checkbox dalam React

Pengendalian checkbox juga dilaksanakan berdasarkan prinsip yang serupa, hanya saja daripada atribut value kita nyatakan atribut checked. Jika atribut ini diberikan nilai true - checkbox akan ditanda, dan jika false - tidak akan ditanda:

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

Biasanya atribut checked diberikan nilai state, yang mengandung nilai boolean:

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

Sama seperti ketika mengendalikan input, jika nilai atribut checked ditetapkan secara keras - keadaan checkbox tidak boleh ditukar. Untuk berfungsi dengan betul, kita akan menukar state-nya kepada nilai yang bertentangan setiap kali perubahan berlaku pada checkbox:

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

Kita boleh permudahkan:

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

Mari kita paparkan keadaan checkbox dalam perenggan, menggunakan operator ternary:

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