Att arbeta med checkbox i React

Att arbeta med checkbox sker också enligt en liknande princip, bara istället för attributet value anger vi attributet checked. Om du skickar true till detta attribut - kommer checkboxen att vara markerad, och om false - kommer den inte att vara markerad:

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

Vanligtvis skickas ett state som innehåller ett booleskt värde till attributet checked:

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

Precis som när man arbetar med input, om värdet på attributet checked är hårt satt - kan checkboxens tillstånd inte ändras. För korrekt funktion, låt oss vid förändring av checkboxen ändra dess state till motsatt värde:

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

Vi kan förenkla:

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

Låt oss visa checkboxens tillstånd i ett stycke, med hjälp av en ternär operator:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>tillstånd: {checked ? 'markerad' : 'inte markerad'}</p>
	</div>;
}

Det finns en checkbox, en knapp och ett stycke. Vid klick på knappen, om checkboxen är markerad, skriv ut i styet en hälsningstext till användaren, och om den inte är markerad - en avskedstext.

Med hjälp av tre checkboxar, be användaren välja språk som hen kan: html, css och js. Skriv ut valresultatet för varje språk i separata stycken.