Event-Handling in JSX

Lassen Sie uns nun die Arbeit mit Ereignissen in React studieren. Lassen Sie uns zum Beispiel bewirken, dass beim Klick auf einen Block ein alert mit einem bestimmten Text erscheint.

Angenommen, wir haben eine Funktion showMess, die einen alert mit einer Nachricht anzeigt, und im HTML- Code gibt es einen Button, bei dem wir bei einem Klick diesen alert sehen möchten:

function App() {
	function showMess() {
		alert('hello');
	}
	
	return <div>
		<button>show</button>
	</div>;
}

Binden wir nun unserem Button das Ereignis onclick, so dass beim Klick auf diesen Button die Funktion showMess ausgelöst wird. Dazu muss das Attribut onClick hinzugefügt werden (und zwar in camelCase, also onClick, nicht onclick), und darin die Funktion angegeben werden, die bei diesem Ereignis ausgeführt werden soll:

function App() {
	function showMess() {
		alert('hello');
	}
	
	return <div>
		<button onClick={showMess}>show</button>
	</div>;
}

So funktioniert also die Arbeit mit Ereignissen: Es wird ein Attribut hinzugefügt (zum Beispiel onClick oder onFocus), und als Wert des Attributs wird die Methode angegeben, die bei diesem Ereignis aufgerufen wird.

Gegeben ist der folgende Code:

function App() {
	function show1() {
		alert(1);
	}
	
	function show2() {
		alert(2);
	}
	
	return <div>
		<button>act1</button>
		<button>act2</button>
	</div>;
}

Machen Sie es so, dass beim Klick auf die erste Schaltfläche die erste Funktion ausgelöst wird, und beim Klick auf die zweite Schaltfläche - die zweite Funktion.