Arbejde med checkbox i React

Arbejde med checkbox foregår også efter et lignende princip, bare i stedet for attributten value angiver vi attributten checked. Hvis du overfører true til denne attribut - vil checkboxen være markeret, og hvis false - vil den ikke være markeret:

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

Normalt overføres en state til attributten checked, som indeholder en boolsk værdi:

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

Ligesom ved arbejde med inputfelter, hvis værdien af attributten checked er hårdt sat - kan checkboxens tilstand ikke ændres. For korrekt funktion skal vi ved ændring af checkboxen ændre dens state til den modsatte værdi:

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

Vi kan forenkle:

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

Lad os udskrive checkboxens tilstand i et afsnit, ved hjælp af den ternære operator:

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

Der gives en checkbox, en knap og et afsnit. Ved klik på knappen, hvis checkboxen er markeret, skal der udskrives i afsnittet en hilstekst til brugeren, og hvis den ikke er markeret - en afskedstekst.

Med tre checkboxes, bed brugeren om at vælge de sprog, som de kan: html, css og js. Resultatet af valget for hvert sprog udskrives i separate afsnit.