React'те checkbox менен иштоо

checkbox менен иштоо да окшош принцип боюнча жүргүзүлөт, бирок value атрибутунун ордуна биз checked атрибутун көрсөтөбүз. Эгерде бул атрибутка true берилсе - анда checkbox белгиленет, ал эми false берилсе - белгиленбейт:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> белгиленген
		<input type="checkbox" checked={false} /> белгиленбеген
	</div>;
}

Адатта checked атрибутуна логикалык маанини камтыган стейт берилет:

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

Инпуттар менен иштөөдөгү сыяктуу эле, эгерде checked атрибутунун маанисин катуу белгилесек - checkbox'тун абалын өзгөртүү мүмкүн болбойт. Туура иштоо үчүн, checkbox өзгөргөн сайын анын стейтин ага карама-каршы мааниге өзгөртөбүз:

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // стейтти тескерисинче кылабыз
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={handleChange} />
	</div>;
}

Жөнөкөйлөтсөк болот:

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

Checkbox'тун абалын абзацка чыгаралы, тернардык операторду колдонуп:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>абал: {checked ? 'белгиленген' : 'белгиленбеген'}</p>
	</div>;
}

Берилген: checkbox, баскыч жана абзац. Баскычты басканда, эгерде checkbox белгиленген болсо, абзацка колдонуучу менен коштошуу текстин чыгарыңыз, ал эми белгиленбеген болсо - коштошүү текстин.

Үч checkbox аркылуу колдонуучудан ал билген тилдерди тандашын сураңыз: html, css жана js. Ар бил тил боюнча тандоонун натыйжасын өзүнчө абзацтарга чыгарыңыз.