Arbeit mit Checkboxen in React

Die Arbeit mit Checkboxen erfolgt nach einem ähnlichen Prinzip, nur dass wir anstelle des Attributs value das Attribut checked angeben. Wenn an dieses Attribut true übergeben wird - dann ist die Checkbox markiert, und wenn false - dann nicht markiert:

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

Normalerweise wird an das Attribut checked ein State übergeben, der einen booleschen Wert enthält:

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

Genau wie bei der Arbeit mit Inputs, wenn der Wert des Attributs checked starr festgelegt wird - kann der Zustand der Checkbox nicht geändert werden. Für die korrekte Funktionsweise werden wir bei einer Änderung der Checkbox ihren State auf den entgegengesetzten Wert setzen:

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

Wir können dies vereinfachen:

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

Lassen Sie uns den Zustand der Checkbox in einen Absatz ausgeben, unter Verwendung des ternären Operators:

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

Gegeben sind eine Checkbox, ein Button und ein Absatz. Beim Klick auf den Button, wenn die Checkbox markiert ist, geben Sie im Absatz einen Begrüßungstext für den Benutzer aus, und wenn sie nicht markiert ist - einen Verabschiedungstext.

Bitten Sie den Benutzer mit drei Checkboxen, die Sprachen auszuwählen, die er beherrscht: HTML, CSS und JS. Das Ergebnis der Ausgabe für jede Sprache geben Sie in separate Absätze aus.