Puna me checkbox në React

Puna me checkbox gjithashtu realizohet sipas një parimi të ngjashëm, vetëm në vend të atributit value ne specifikojmë atributin checked. Nëse në këtë atribut kaloni true - atëherë checkbox do të jetë i zgjedhur, dhe nëse false - nuk do të jetë i zgjedhur:

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

Zakonisht në atributin checked kalojmë state, që përmban një vlerë boolean:

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

Po kështu, ashtu si në punën me inputet, nëse caktojmë në mënyrë të ngurtë vlerën e atributit checked - gjendja e checkbox nuk do të mund të ndryshohet. Për funksionim korrekt, me ndryshimin e checkbox do ta ndryshojmë state-in e tij në vlerën e kundërt të saj:

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // e kthen mbrapsht state-in
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={handleChange} />
	</div>;
}

Mund ta thjeshtojmë:

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

Le ta shfaqim gjendjen e checkbox në një paragraf, duke përdorur operatorin ternar:

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

Jepet një checkbox, një buton dhe një paragraf. Me klikim në buton, nëse checkbox është i zgjedhur, shfaqni në paragraf tekstin e përshëndetjes me përdoruesin, dhe nëse nuk është i zgjedhur - tekstin e lamtumirës.

Me ndihmën e tre checkbox-eve, kërkojini përdoruesit të zgjedhë gjuhët që i njeh: html, css dhe js. Rezultatin e zgjedhjes për çdo gjuhë shfaqeni në paragrafë të veçantë.