React'ta Checkbox ile Çalışma

Checkbox ile çalışma benzer bir prensibe dayanır, sadece value özelliği yerine checked özelliğini kullanırız. Bu özelliğe true değeri verilirse - checkbox işaretlenmiş olur, eğer false değeri verilirse - işaretlenmemiş olur:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> işaretli
    <input type="checkbox" checked={false} /> işaretli değil
  </div>;
}

Genellikle checked özelliğine, mantıksal bir değer içeren state iletilir:

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

Tıpkı input'larla çalışırken olduğu gibi, eğer checked özelliğinin değeri sabit olarak ayarlanırsa - checkbox'ın durumu değiştirilemez. Doğru çalışması için, checkbox değiştiğinde state'ini mevcut değerinin tersine çevireceğiz:

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

Basitleştirebiliriz:

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

Checkbox'ın durumunu, üçlü operatör kullanarak bir paragrafa yazdıralım:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <p>durum: {checked ? 'işaretli' : 'işaretli değil'}</p>
  </div>;
}