Welche verschiedenen Möglichkeiten gibt es, React-Click-Ereignisse zu schreiben?

Schreibmethode: 1. Verwenden Sie „onClick={this.handleClick}“ 2. Verwenden Sie „onClick={this.handleClick.bind(this)}“ 3. Verwenden Sie „{(params)=>this.handleClick (params)}".

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Welche verschiedenen Möglichkeiten gibt es, React-Click-Ereignisse zu schreiben? Kommen wir gleich zur Sache. Lassen Sie uns zunächst die richtige Methode zum Hinzufügen eines Ereignisses zu einer Schaltfläche erläutern:

Die richtige Methode zum Hinzufügen eines Onclick-Ereignisses zu einer Schaltfläche

Es werden keine Parameter übergeben verwendet (gewöhnliche Funktion) zum Definieren von

onClick = { this .handleClick.bind(this) }

// handleClick用箭头函数定义时，为onClick添加事件应该这么写：<Button onClick = { this.handleClick }></Button>

handleClick ist wie folgt definiert:

handleClick = () => { // do something here};

Pass-Parameter

// handleClick kann mit onClick = { (params ) => this.handleClick(params) }

// handleClick用普通函数定义时，为onClick添加事件应该这么写：<Button onClick = { this.handleClick.bind(this) }></Button>

Als nächstes analysieren wir, warum es richtig ist, so zu schreiben:

Diese Zeigeranalyse

Verstehen Dieses Problem mit den folgenden Sätzen:

• Die Pfeilfunktion hat kein eigenes Dies, also ist ihr Dies: Dies des Kontexts, wenn sie definiert ist.
Eine gewöhnliche Funktion hat ihr eigenes Dies, also ist sie Dies: Dies des Kontexts wenn es ausgeführt wird

Schauen wir uns zuerst das erste an. Eine Möglichkeit zum Schreiben:

1. onClick = { this.handleClick } + Pfeilfunktion

Der unten angegebene Code lautet: Fügen Sie ein Onclick-Ereignis hinzu (ein vollständiges jsx) für eine Schaltfläche

handleClick () { // do something here }

Klicken Sie auf die Schaltfläche und drucken Sie den Zeiger auf examplePage this:

this: examplePage {props: Object, context: {}, refs: {}, updater: Object, state: {}, …}

Analyse:

Wenn auf die Schaltfläche geklickt wird, wird das handleClick-Ereignis als Handling-Funktion bezeichnet.

Da handleClick eine Pfeilfunktion ist, ist dies also der Definitionskontext. handleClick ist in der Klasse examplePage definiert.

Das zeigt also auf examplePage

Mal sehen, ob die Pfeilfunktion in eine normale Funktion geändert wird. Situation:

2. onClick = { this.handleClick.bind(this) } + gewöhnliche Funktion

Schauen wir uns zuerst an Was wird von console.log(this) ausgegeben, wenn bind(this) nicht verwendet wird:

 // handleClick可以是箭头函数，也可以是普通函数<Button onClick = { (params) => this.handleClick(params) }></Button>

Klicken Sie auf die Schaltfläche und drucken Sie Folgendes aus:

this: undefiniert

Analyse:

Wenn auf die Schaltfläche geklickt wird, Die Ereignisverarbeitungsfunktion handleClick wird aufgerufen.

Da handleClick eine gewöhnliche Funktion ist, ist dies also der Ausführungskontext. handleClick wird ausgeführt, wenn auf der Seite auf eine Schaltfläche geklickt wird. Der Kontext ist also die HTML-Seite Dies ist undefiniert und verweist nicht auf die Beispielseite.

Hinweis: In der strikten Version ist dies standardmäßig nicht mehr Fenster, sondern undefiniert. Der Modulcode ist immer strikter Moduscode.

Alle Teile einer ClassDeclaration oder ClassExpression sind strikt Moduscode.

Sie müssen also bind verwenden, um diesen Zeiger zu ändern, d der Renderfunktion (die auf die Klasse examplePage zeigt) als Variable in handleClick ist ursprünglich eine gewöhnliche Funktion, und dies ist die Funktion this des Ausführungskontexts (d. h. undefiniert), aber weil bind(this) übergeben wurde, zeigte dies darauf examplePage

Zu diesem Zeitpunkt verweist dies also auf examplePage, was das Problem löst, dass dies undefiniert ist

• Nachdem man die beiden oben genannten verstanden hat, ist die letzte Seite leicht zu verstehen
• 3. onClick = { (params) => ; this.handleClick(params) } + Gewöhnliche Funktionen/Pfeilfunktionen können verwendet werden Pfeilfunktion (params) => this.handleClick(params) wird aufgerufen, also ist dies das This des Kontexts, wenn er definiert ist,
• handleClick ist in der Klasse examplePage definiert,
• Das zeigt also auf examplePage

Gemäß Diese Idee: Solange das onClick-Antwortereignis mit einer Pfeilfunktion geschrieben wird, zeigt diese beim Aufruf auf die Komponentenklasse und es wird kein Problem geben

Dann, wenn keine Parameter übergeben werden, schreiben Sie einfach:

// examplePage.jsximport React from 'react';import { Button } from 'antd';class examplePage extends React.Component {
    // 2. 定义handleClick事件
    handleClick = () => {
        console.log(this); //3. this指向examplePage
    }

    render() {
        return (
            <p>
            // 1. 为onClick绑定 handleClick事件处理函数
                <Button onClick = { this.handleClick }>click me</Button>
            </p>
        )
    }}export default examplePage;

Dies ist jedoch nicht möglich, da React () => this.handleClick() direkt analysiert und handleClick aufgerufen wird, was onClick = „Das Ergebnis des Aufrufs von handleClick“ entspricht.

Also, wenn keine Parameter übergeben werden, Sie kann nur so schreiben:

// examplePage.jsximport React from 'react';import { Button } from 'antd';class examplePage extends React.Component {
    // 2. !将箭头函数改为普通函数
    handleClick () {
        console.log(this); // 3. this 为 undefined
    }

    render() {
        return (
            <p>
            // 1. 为onClick绑定 handleClick事件处理函数
                <Button onClick = { this.handleClick }>click me</Button>
            </p>
        )
    }}export default examplePage;

Zusammenfassung

Die ersten drei Fragen können beantwortet werden
• • 什么情况下需要bind(this)？
    答： onClick传入的事件处理函数是普通函数的时候，需要bind(this)来改变指向
  • 为什么要用bind(this)?
    答：如果不用bind(this), this会指向undefined
  • 可以不用bind(this)吗？
    答：用箭头函数 (用箭头函数定义事件处理函数）

  //定义handleClick事件
  handleClick = () => {
        // do something here
  };
  
  //为onClick绑定handleClick事件处理函数
  <Button onClick = {this.handleClick}></Button> // 不传参
  <Button onClick = {（param) => this.handleClick(param) }></Button> // 传参

  推荐学习：《react视频教程》

Das obige ist der detaillierte Inhalt vonWelche verschiedenen Möglichkeiten gibt es, React-Click-Ereignisse zu schreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!