Checkbox'ide kasutamine Reactis

Checkbox'idega töötamisel rakendatakse samalaadset põhimõtet, kuid value atribuudi asemel määrame atribuudi checked. Kui sellele atribuudile anda true - siis checkbox on märgitud ja kui false - siis pole märgitud:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> märgitud
		<input type="checkbox" checked={false} /> pole märgitud
	</div>;
}

Tavaliselt antakse atribuudile checked state, mis sisaldab loogilist väärtust:

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

Samuti, nagu input'itega töötamisel, kui atribuudi checked väärtus on jäigalt määratud - siis checkbox'i olekut ei saa muuta. Korrektseks tööks muudame checkbox'i muutumisel selle state'i vastupidiseks väärtuseks:

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

Saame lihtsustada:

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

Kuvame checkbox'i oleku lõigus, kasutades ternaaroperaatorit:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>olek: {checked ? 'märgitud' : 'pole märgitud'}</p>
	</div>;
}

Antud on checkbox, nupp ja lõik. Nupu vajutamisel, kui checkbox on märgitud, kuva lõigus tervitustekst kasutajaga, aga kui pole märgitud - jumalagajättu tekst.

Kolmega checkbox'e abil paluge kasutajal valida keeled, mida ta oskab: html, css ja js. Valiku tulemuse iga keele kohta kuvage eraldi lõikudes.