Delo s checkbox v React

Delo s checkbox prav tako poteka po podobnem principu, le da namesto atributa value določimo atribut checked. Če temu atributu posredujemo true - bo checkbox označen, če pa false - ne bo označen:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> označen
		<input type="checkbox" checked={false} /> ni označen
	</div>;
}

Običajno se v atribut checked posreduje state, ki vsebuje logično vrednost:

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

Prav tako, kot pri delu z inputi, če togo določimo vrednost atributa checked - stanja checkboxa ne bo mogoče spremeniti. Za pravilno delovanje bomo ob spremembi checkboxa zamenjali njegov state z nasprotno vrednostjo:

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

Lahko poenostavimo:

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

Izpišimo stanje checkboxa v odstavek, z uporabo ternarnega operatorja:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>stanje: {checked ? 'označen' : 'ni označen'}</p>
	</div>;
}

Podan je checkbox, gumb in odstavek. Ob kliku na gumb, če je checkbox označen, izpišite v odstavek besedilo pozdrava z uporabnikom, če pa ni označen - besedilo slovesa.

S tremi checkboxi prosite uporabnika, naj izbere jezike, ki jih pozna: html, css in js. Rezultat izbire za vsak jezik izpišite v ločene odstavke.