Работа з checkbox у React

Праца з checkbox таксама ажыццяўляецца па падобным прынцыпе, толькі замест атрыбута value мы паказваем атрыбут checked. Калі ў гэты атрыбут перадаць true - то чэкбокс будзе адзначаны, а калі false - не будзе адзначаны:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> адзначаны
		<input type="checkbox" checked={false} /> не адзначаны
	</div>;
}

Звычайна ў атрыбут checked перадаецца стэйт, які змяшчае лагічнае значэнне:

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

Гэтак жа, як і пры працы з інпутамі, калі жорстка задаць значэнне атрыбута checked - стан чэкбокса нельга будзе змяніць. Для карэктнай працы будзем па змяненні чэкбокса мяняць яго стэйт на супрацьлеглае яму значэнне:

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // інвертуем стэйт
	}
	
	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>;
}

Давайце вывядзем стан чэкбокса ў абзац, выкарыстоўваючы тэрнарны аператар:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>стан: {checked ? 'адзначаны' : 'не адзначаны'}</p>
	</div>;
}

Дадзены чэкбокс, кнопка і абзац. Па кліку на кнопку, калі чэкбокс адзначаны, выведзіце ў абзац тэкст прывітання з карыстальнікам, а калі не адзначаны - тэкст развітання.

З дапамогай трох чэкбоксаў папрасіце карыстальніка выбраць мовы, якія ён ведае: html, css і js. Вынік выбару па кожнай мове выводзьце ў асобныя абзацы.