Kufanya Kazi na Checkbox katika React

Kufanya kazi na checkbox pia hufanyika kulia kanuni sawa, lakini badala ya sifa value tunataja sifa checked. Ikiwa utaweka thamani true kwenye sifa hii - basi checkbox itakuwa imechaguliwa, na ikiwa false - haitakuwa imechaguliwa:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> imechaguliwa
		<input type="checkbox" checked={false} /> haijachaguliwa
	</div>;
}

Kawaida thamani ya sifa checked hutoka kwenye hali (state), inayobeba thamani ya kimantiki:

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

Vilevile, kama ilivyo kwenye kufanya kazi na viingilio, ikiwa utaweka thamani ngwa kwenye sifa checked - hali ya checkbox haitaweza kubadilishwa. Ili ifanye kazi ipasavyo, kwa kila mabadiliko ya checkbox tutabadilisha hali yake kwa thamani tofauti kabisa na ile iliyopo:

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

Tunaweza kurahisisha:

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

Wacha tuonyeshe hali ya checkbox kwenye aya, tukitumia opereta ya ternary:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>hali: {checked ? 'imechaguliwa' : 'haijachaguliwa'}</p>
	</div>;
}

Kuna checkbox, kifungo na aya. Kwa kubonyeza kifungo, ikiwa checkbox imechaguliwa, onyesha kwenye aya maandiko ya salamu kwa mtumiaji, na ikiwa haijachaguliwa - maandiko ya kuaga.

Kwa kutumia checkbox tatu omba mtumiaji achague lugha anazozijua: html, css na js. Matokeo ya uchaguzi wa kila lugha yonyeshe kwenye aya tofauti.