Lucrul cu checkbox în React

Lucrul cu checkbox de asemenea se realizează după un principiu similar, doar că în loc de atributul value indicăm atributul checked. Dacă în acest atribut este transmis true - atunci checkbox-ul va fi bifat, iar dacă false - nu va fi bifat:

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

De obicei, în atributul checked este transmis un starea (state), care conține o valoare logică:

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

La fel ca și în cazul lucrului cu input-uri, dacă stabiliți rigid valoarea atributului checked - starea checkbox-ului nu va putea fi schimbată. Pentru o funcționare corectă, la modificarea checkbox-ului, vom schimba starea lui în valoarea opusă acesteia:

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

Putem simplifica:

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

Să afișăm starea checkbox-ului într-un paragraf, folosind operatorul ternar:

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

Este dat un checkbox, un buton și un paragraf. La click pe buton, dacă checkbox-ul este bifat, afișați în paragraf textul de salut pentru utilizator, iar dacă nu este bifat - textul de rămas bun.

Cu ajutorul a trei checkbox-uri, cereți utilizatorului să selecteze limbajele pe care le cunoaște: html, css și js. Rezultatul selecției pentru fiecare limbaj afișați în paragrafe separate.