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

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

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

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

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

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

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // กลับค่าของ state
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={handleChange} />
	</div>;
}

เราสามารถทำให้ง่ายขึ้นได้:

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

ลองแสดงสถานะของ checkbox ลงในย่อหน้า โดยใช้ตัวดำเนินการเงื่อนไข:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>สถานะ: {checked ? 'ถูกเลือก' : 'ไม่ได้ถูกเลือก'}</p>
	</div>;
}

มี checkbox ปุ่ม และย่อหน้า เมื่อคลิกที่ ปุ่ม หาก checkbox ถูกเลือก ให้แสดงข้อความทักทาย ผู้ใช้ในย่อหน้า แต่ถ้าไม่ถูกเลือก - ให้แสดงข้อความลาก่อน

ใช้ checkbox สามอัน ขอให้ผู้ใช้ เลือกภาษาที่เขารู้จัก: html, css และ js แสดงผลการเลือกสำหรับแต่ละภาษา ในย่อหน้าแยกกัน