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: Յուրաքանչյուր լեզվի համար ընտրության արդյունքը արտածեք առանձին պարբերություններում: