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. Ҳар бир тил бўйича танлов натижасини алаҳида абзацларга чиқаринг.