Praca z checkbox w React

Praca z checkbox również odbywa się na podobnej zasadzie, tylko zamiast atrybutu value podajemy atrybut checked. Jeśli przekażemy do tego atrybutu true - to checkbox będzie zaznaczony, a jeśli false - nie będzie zaznaczony:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> zaznaczony
		<input type="checkbox" checked={false} /> nie zaznaczony
	</div>;
}

Zwykle do atrybutu checked przekazywany jest stan, zawierający wartość logiczną:

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

Podobnie jak przy pracy z inputami, jeśli sztywno ustawimy wartość atrybutu checked - stanu checkboxa nie będzie można zmienić. Dla poprawnej działania przy każdej zmianie checkboxa zmieniajmy jego stan na przeciwny do jego wartości:

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

Możemy uprościć:

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

Wyświetlmy stan checkboxa w akapicie, używając operatora trójargumentowego:

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

Dany jest checkbox, przycisk i akapit. Po kliknięciu na przycisk, jeśli checkbox jest zaznaczony, wyświetl w akapicie tekst powitania z użytkownikiem, a jeśli nie jest zaznaczony - tekst pożegnania.

Za pomocą trzech checkboxów poproś użytkownika o wybór języków, które zna: html, css i js. Wynik wyboru dla każdego języka wyświetlaj w oddzielnych akapitach.