การทำงานกับ checkbox ใน React

การทำงานกับ checkbox ก็ดำเนินการตามหลักการที่คล้ายกัน เพียงแค่แทนที่แอตทริบิวต์ value เราใช้ แอตทริบิวต์ checked แทน หากส่งค่า true ไปยังแอตทริบิวต์นี้ - checkbox จะถูกเลือก (ติ๊ก) แต่หากส่ง false - จะไม่ถูกเลือก:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> ถูกเลือก
    <input type="checkbox" checked={false} /> ไม่ได้ถูกเลือก
  </div>;
}

โดยปกติแล้ว จะส่ง state ที่มีค่าบูลีนเข้าไปในแอตทริบิวต์ checked:

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

เช่นเดียวกับการทำงานกับอินพุต หาก กำหนดค่าแอตทริบิวต์ checked แบบตายตัว - จะไม่สามารถเปลี่ยนสถานะของ checkbox ได้ เพื่อให้ทำงานได้อย่างถูกต้อง เราจะเปลี่ยน state ของมันเป็นค่าตรงข้ามเมื่อมีการเปลี่ยนแปลง checkbox:

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>;
}