React-та checkbox-пен жұмыс

checkbox-пен жұмыс де сәйкес принцип бойынша жүзеге асырылады, тек value атрибутының орнына біз checked атрибутын көрсетеміз. Егер бұл атрибутқа true берілсе - онда checkbox белгіленеді, ал егер 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 атрибутының мәнін қатты тағайындасақ - checkbox-тың күйін өзгерту мүмкін болмайды. Дұрыс жұмыс істеу үшін өзгеріс кезінде чекбокстың стейтін оған қарама-қарсы мәнге өзгертеміз:

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>;
}

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. Әр тіл бойынша таңдау нәтижесін жеке абзацтарға шығарыңыз.