Кор бо checkbox дар React

Кор бо 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>;
}

Чекбокс, тугма ва абзас дода шудааст. Бо клик кардан ба тугма, агар чекбокс нишон дода шуда бошад, дар абзас матни салом гуфтан бо корбарро бароваред, ва агар нишон дода нашуда бошад - матни хайр хонданро.

Бо ёрии се чекбокс аз корбар хоҳиш кунед, ки забонҳое, ки ӯ медонад: html, css ва js-ро интихоб кунад. Натиҷаи интихоб барои ҳар як забон ба абзасҳои ҷудогона бароварда шаванд.