Darbība ar checkbox React

Darbība ar checkbox tiek veikta arī pēc līdzīga principa, tikai atribūta value vietā mēs norādām atribūtu checked. Ja šajā atribūtā padod true - tad checkbox būs atzīmēts, un ja false - netiks atzīmēts:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> atzīmēts
		<input type="checkbox" checked={false} /> neatzīmēts
	</div>;
}

Parasti atribūtā checked tiek padots state, satur loģisko vērtību:

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

Tāpat kā strādājot ar input, ja stingri iestatīsiet atribūta checked vērtību - checkbox stāvokli nevarēs mainīt. Lai darbotos pareizi, pēc checkbox izmaiņām mainīsim tā state uz pretējo vērtību:

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

Varam vienkāršot:

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

Izvadīsim checkbox stāvokli rindkopā, izmantojot ternāro operatoru:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>stāvoklis: {checked ? 'atzīmēts' : 'neatzīmēts'}</p>
	</div>;
}

Dots checkbox, poga un rindkopa. Noklikšķinot uz pogas, ja checkbox ir atzīmēts, izvadiet rindkopā sveiciena tekstu ar lietotāju, un ja nav atzīmēts - atvadu tekstu.

Ar trīs checkbox palīdzību palūdziet lietotājam izvēlēties valodas, kuras viņš prot: html, css un js. Izvēles rezultātu katrā valodā izvadiet atsevišķās rindkopās.