Darbas su checkbox React

Darbas su checkbox taip pat vykdomas pagal panašų principą, tik vietoj atributo value mes nurodome atributą checked. Jei šiam atributui perduosite true - tada checkbox bus pažymėtas, o jei false - nebus pažymėtas:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> pažymėtas
		<input type="checkbox" checked={false} /> nepažymėtas
	</div>;
}

Paprastai į atributą checked perduodama būsena (state), kuriame yra loginė reikšmė:

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

Taip pat, kaip ir dirbant su input laukais, jei standžiai nustatysite atributo checked reikšmę - checkbox būsenos nebus galima pakeisti. Kad veiktų teisingai, keisdami checkbox būseną, nustatysime jos priešingą reikšmę:

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // apverčiame būseną (state)
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={handleChange} />
	</div>;
}

Galime supaprastinti:

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

Išveskime checkbox būseną į pastraipą, naudodami ternary operatorių:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>būsena: {checked ? 'pažymėtas' : 'nepažymėtas'}</p>
	</div>;
}

Duotas checkbox, mygtukas ir pastraipa. Paspaudus mygtuką, jei checkbox pažymėtas, išveskite į pastraipą sveikinimo su vartotoju tekstą, o jei nepažymėtas - atsisveikinimo tekstą.

Naudodami tris checkbox, paprašykite vartotojo pasirinkti kalbas, kurias jis moka: html, css ir js. Pasirinkimo rezultatą kiekvienai kalbai išveskite į atskiras pastraipas.