React-da checkbox bilen işlemek

checkbox bilen işlemek hem meñzeş princip boýunça amala aşyrylýar, diňe value atributy ýerine checked atributyny görkezýäris. Eger bu atributa true geçirilse - checkbox bellikli bolar, eger false - bellikli bolmaz:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> bellikli
		<input type="checkbox" checked={false} /> bellikli däl
	</div>;
}

Adatça checked atributyna mätäçlik bahasyny saklaýan ýagdaý geçirilýär:

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

Indamlara işlemekdeki ýaly, eger checked atributynyň bahasy berk belgilense - checkbox-ynyň ýagdaýyny üýtgetmek mümkin bolmaz. Dogry işlemek üçin onuň ýagdaýyny üýtgetmek bilen ony ters baha çalşyrmaly:

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // ýagdaýy tersine öwürýäris
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={handleChange} />
	</div>;
}

Ýönekeýleşdirip bileris:

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

Geliň, checkbox-ynyň ýagdaýyny tertipçi ulanyp, abzasda görkezeliň:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>ýagdaýy: {checked ? 'bellikli' : 'bellikli däl'}</p>
	</div>;
}

Checkbox, düwme we abzas berlen. Düwmä basylanda, eger checkbox bellikli bolsa, ulanyjydan salamlaşma teksti abzasa görkeziliň, eger bellikli bolmasa - hoşlaşma teksti.

Üç checkbox ulanyp, ulanyjydan bilýän dillerini saýlamagyny soraň: html, css we js. Her dil boýunça saýlama netijesini aýratyn abzaslarda görkeziň.