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

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.

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;

Nach dem Login kopieren

// 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;

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> // 传参

  Nach dem Login kopieren

  推荐学习：《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!