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:

function 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:

function 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:

function 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:

function 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:

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

Diberi satu checkbox, satu butang dan satu perenggan. Apabila diklik pada butang, jika checkbox ditanda, paparkan dalam perenggan tersebut teks ucapan selamat datang kepada pengguna, dan jika tidak ditanda - teks ucapan selamat tinggal.

Dengan menggunakan tiga checkbox, minta pengguna untuk memilih bahasa yang dia tahu: html, css dan js. Keputusan pilihan untuk setiap bahasa dipaparkan dalam perenggan yang berasingan.