Работа с checkbox в React

Работата с checkbox също се осъществява по подобен принцип, само че вместо атрибут value ние задаваме атрибут checked. Ако в този атрибут се подаде true - тогава checkbox ще бъде отметнат, а ако false - няма да бъде отметнат:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> отметнат
		<input type="checkbox" checked={false} /> не отметнат
	</div>;
}

Обикновено в атрибут checked се подава state, съдържащ булева стойност:

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

Също като при работата с input полета, ако се зададе твърдо стойността на атрибута checked - състоянието на checkbox няма да може да се промени. За коректна работа при промяна на checkbox ще променяме неговия state на противоположна стойност:

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. Резултата от избора за всеки език извеждайте в отделни абзаци.