A checkbox kezelése Reactben

A checkbox kezelése hasonló elv alapján történik, csak a value attribútum helyett a checked attribútumot használjuk. Ha ebbe az attribútumba true-t adunk meg - akkor a checkbox be lesz jelölve, ha pedig false-t - akkor nem lesz bejelölve:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> bejelölt
		<input type="checkbox" checked={false} /> nincs bejelölve
	</div>;
}

Általában a checked attribútumba egy állapot (state) kerül, ami logikai értéket tartalmaz:

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

Úgy, ahogyan a bemeneti mezők (input) esetében is, ha mereven beállítjuk a checked attribútum értékét - a checkbox állapota nem változtatható meg. A megfelelő működés érdekében a checkbox változásakor állítsuk be az állapotát az ellenkezőjére:

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // megfordítjuk az állapotot
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={handleChange} />
	</div>;
}

Leegyszerűsíthetjük:

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

Jelenítsük meg a checkbox állapotát egy bekezdésben (paragraph), a ternális operátor segítségével:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>állapot: {checked ? 'bejelölt' : 'nincs bejelölve'}</p>
	</div>;
}

Adott egy checkbox, egy gomb és egy bekezdés. A gombra kattintáskor, ha a checkbox be van jelölve, jelenjen meg a bekezdésben egy üdvözlő szöveg a felhasználónak, ha nincs bejelölve - pedig egy búcsúzó szöveg.

Három checkbox segítségével kérje a felhasználót, hogy válassza ki az ismert nyelveket: html, css és js. Az egyes nyelvekre vonatkozó választás eredményét jelenítse meg külön bekezdésekben.