Làm việc với checkbox trong React

Làm việc với checkbox cũng được thực hiện theo nguyên tắc tương tự, chỉ thay vì thuộc tính value thì chúng ta chỉ định thuộc tính checked. Nếu truyền vào thuộc tính này true - checkbox sẽ được đánh dấu, còn nếu là false - sẽ không được đánh dấu:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> đã đánh dấu
		<input type="checkbox" checked={false} /> chưa đánh dấu
	</div>;
}

Thông thường vào thuộc tính checked được truyền vào state, chứa giá trị logic:

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

Cũng giống như khi làm việc với input, nếu gán cứng giá trị cho thuộc tính checked - trạng thái của checkbox sẽ không thể thay đổi được. Để hoạt động chính xác, chúng ta sẽ thay đổi state của nó thành giá trị ngược lại khi checkbox thay đổi:

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // đảo ngược state
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={handleChange} />
	</div>;
}

Chúng ta có thể đơn giản hóa:

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

Hãy hiển thị trạng thái của checkbox vào một đoạn văn, sử dụng toán tử ba ngôi:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>trạng thái: {checked ? 'đã đánh dấu' : 'chưa đánh dấu'}</p>
	</div>;
}

Cho một checkbox, một nút bấm và một đoạn văn. Khi nhấp vào nút bấm, nếu checkbox được đánh dấu, hãy hiển thị trong đoạn văn văn bản chào mừng người dùng, còn nếu không được đánh dấu - văn bản tạm biệt.

Sử dụng ba checkbox, yêu cầu người dùng chọn các ngôn ngữ mà họ biết: html, css và js. Kết quả lựa chọn cho từng ngôn ngữ hiển thị vào các đoạn văn riêng biệt.