Werk met checkbox in React

Om met 'n checkbox te werk volg ook 'n soortgelyke beginsel, net in plaas van die value kenmerk spesifiseer ons die checked kenmerk. As ons true na hierdie kenmerk stuur - sal die checkbox gemerk wees, en as ons false stuur - sal dit nie gemerk wees nie:

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

Gewoonlik word 'n staat wat 'n Booleaanse waarde bevat, na die checked kenmerk gestuur:

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

Net soos wanneer met insetvelde gewerk word, as die waarde van die checked kenmerk hard vasgestel is - kan die toestand van die checkbox nie verander word nie. Vir korrekte werking sal ons die staat na die teenoorgestelde waarde verander wanneer die checkbox verander word:

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

Ons kan dit vereenvoudig:

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

Laat ons die toestand van die checkbox na 'n paragraaf uitstuur, deur die ternêre operateur te gebruik:

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

Daar is 'n checkbox, 'n knoppie en 'n paragraaf. Wanneer op die knoppie geklik word, indien die checkbox gemerk is, stuur na die paragraaf 'n groetteks met die gebruiker, en indien dit nie gemerk is nie - 'n afskeidsteks.

Deur van drie checkboxes gebruik te maak, laat die gebruiker die tale kies wat hy ken: html, css en js. Stuur die keiseresultaat vir elke taal na afsonderlike paragrawe.