React Ereignisbehandlung

Die Ereignisbehandlung von React-Elementen ähnelt der von DOM-Elementen. Es gibt jedoch einige syntaktische Unterschiede:

  • Bei React verwenden Attributnamen für die Ereignisbindung camelCase, nicht Kleinbuchstaben.
  • Bei JSX-Syntax müssen Sie eine Funktion als Event-Handler übergeben, statt einer Zeichenfolge (dem DOM-Element-Ansatz).

Der übliche HTML-Ansatz ist:

<button onclick="activateLasers()">
  激活按钮
</button>

In React ist der Ansatz:

<button onClick={activateLasers}>
  激活按钮
</button>

Ein weiterer Unterschied in React besteht darin, dass Sie nicht returnfalseverwenden können, um das Standardverhalten zu verhindern; Sie müssen explizitpreventDefault verwenden.。

Zum Beispiel verhindern wir in HTML normalerweise, dass ein Link standardmäßig eine neue Seite öffnet, und zwar so:
<a href="../index.html" onclick="console.log('点击链接'); return false">
  点我
</a>

In React ist der Ansatz:

function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('Link angeklickt'); } return ( <a href="#" onClick={handleClick}> Klick mich </a> ); }

Im Beispiel ist e ein synthetisches Ereignis.

Wenn du React verwendest, musst du normalerweise nicht addEventListener verwenden, um einem DOM-Element nach seiner Erstellung einen Listener hinzuzufügen. Du musst einen Listener nur bereitstellen, wenn das Element anfänglich gerendert wird.

Wenn du eine Komponente mit der ES6-Klassensyntax definierst, wird der Event-Handler zu einer Methode der Klasse. Zum Beispiel rendert die unten stehende Toggle-Komponente einen Button, mit dem Benutzer den Schalterstatus umschalten können:

Beispiel

class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; //Diese Bindung ist notwendig, damit `this` in der Callback-Funktion verwendet werden kann this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? 'EIN' : 'AUS'} </button> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <Toggle />, document.getElementById('example') );

Ausprobieren »

Bei JSX-Callbacks müssen Sie vorsichtig sein. Klassenmethoden sind standardmäßig nicht an this gebunden. Wenn Sie vergessen, this.handleClick zu binden und es an onClick zu übergeben, ist der Wert von this undefined, wenn Sie die Funktion aufrufen.

Im Allgemeinen, wenn Sie nach einer Methode kein () hinzufügen, zum BeispielonClick={this.handleClick}, sollten Sie this an diese Methode binden.

Wenn die Verwendung von bind Sie stört, gibt es zwei Möglichkeiten, dies zu lösen. Wenn Sie die experimentelle Syntax für Eigenschaftsinitialisierer verwenden, können Sie Eigenschaftsinitialisierer verwenden, um Callbacks korrekt zu binden:

class LoggingButton extends React.Component { //Diese Syntax stellt sicher, dass `this` innerhalb von handleClick gebunden ist //Dies ist nur ein Test handleClick = () => { console.log('dies ist:', this); } render() { return ( <button onClick={this.handleClick}> Klick mich </button> ); } }

Wenn Sie die Property-Initializer-Syntax nicht verwenden, können Sie Arrow-Funktionen im Callback verwenden:

class LoggingButton extends React.Component { handleClick() { console.log('dies ist:', this); } render() { //Diese Syntax stellt sicher, dass `this` innerhalb von handleClick gebunden ist return ( <button onClick={(e) => this.handleClick(e)}> Klick mich </button> ); } }

Ein Problem bei dieser Syntax besteht darin, dass bei jedem Rendern von LoggingButton eine andere Callback-Funktion erstellt wird. In den meisten Fällen ist das in Ordnung. Wenn dieser Callback jedoch als Prop an untergeordnete Komponenten übergeben wird, können diese Komponenten zusätzliches Re-Rendering durchführen. Wir empfehlen im Allgemeinen, im Konstruktor zu binden oder die Property-Initializer-Syntax zu verwenden, um diese Art von Performance-Problem zu vermeiden.

Übergeben von Argumenten an Event-Handler

Normalerweise übergeben wir zusätzliche Argumente an Event-Handler. Wenn id beispielsweise die id der Zeile ist, die Sie löschen möchten, können Sie auf eine der folgenden beiden Arten Argumente an den Event-Handler übergeben:

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
Die oben genannten beiden Ansätze sind gleichwertig.

In den beiden obigen Beispielen wird der Parameter e, das React-Event-Objekt, als zweites Argument übergeben. Beim Ansatz mit der Arrow-Funktion muss das Event-Objekt explizit übergeben werden, beim bind-Ansatz werden das Event-Objekt und zusätzliche Argumente implizit übergeben.

Es ist erwähnenswert, dass beim Übergeben von Argumenten an eine Listener-Funktion über bind, bei einer in einer Klassenkomponente definierten Listener-Funktion, das Event-Objekt e nach den übergebenen Argumenten stehen sollte, zum Beispiel:

class Popper extends React.Component{ constructor(){ super(); this.state = {name:'Hello world!'}; } preventPop(name, e){ //Das Event-Objekt e sollte zuletzt stehen e.preventDefault(); alert(name); } render(){ return ( <div> <p>hello</p> {/*Argumente über die bind()-Methode übergeben.*/} <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Klick</a> </div> ); } }
Weitere Erweiterungen