Checkboxien käsittely Reactissa

Checkboxien käsittely tapahtuu samankaltaisella periaatteella, vain value-attribuutin sijasta määritämme checked-attribuutin. Jos tähän attribuuttiin välitetään true - checkbox on valittu, ja jos false - se ei ole valittu:

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

Yleensä checked-attribuuttiin välitetään tila, joka sisältää loogisen arvon:

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

Samoin kuin syötekenttien käsittelyssä, jos checked-attribuutin arvo asetetaan kovakoodatusti - checkboxin tilaa ei voi muuttaa. Toimiakseen oikein, muutamme checkboxin muuttuessa sen tilan vastakkaiseksi arvoksi:

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

Voimme yksinkertaistaa:

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

Esitetään checkboxin tila kappaleessa, käyttäen ehtolausetta:

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

Annettu checkbox, painike ja kappale. Kun painiketta klikataan, jos checkbox on valittu, näytä kappaleessa tervehdysteksti käyttäjälle, ja jos ei ole valittu - tekstin jäähyväisistä.

Kolmella checkboxilla pyydä käyttäjää valitsemaan tuntemansa kielet: html, css ja js. Tulosta kunkin kielen valintatulos omaksi kappaleekseen.