Quelles sont les différentes manières d’écrire des événements de clic de réaction ?

Méthode d'écriture : 1. Utilisez "onClick={this.handleClick}" ; 2. Utilisez "onClick={this.handleClick.bind(this)}" ; 3. Utilisez "{(params)=>this.handleClick ( paramètres)}".

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Quelles sont les différentes façons d'écrire des événements de clic de réaction

Allons droit au but. Tout d'abord, donnons la bonne façon d'ajouter un événement à un bouton :

La bonne façon d'ajouter un événement onclick à un bouton.

• Aucun paramètre n'est transmis

// handleClick utilise pour définir
onClick = { this.handleClick }

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

handleClick est défini comme ceci :

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

ou

// poignéeCliquez utilise (fonction ordinaire) pour définir
onClick = { this .handleClick.bind(this) }

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

handleClick est défini comme ceci :

handleClick () { // do something here }

• pass settings

// handleClick peut être défini en utilisant /(fonction ordinaire)
onClick = { (params ) => this.handleClick(params) }

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

Ensuite, analysons pourquoi il est correct d'écrire comme ceci :

Cette analyse de pointage

Comprenez ce problème avec les phrases suivantes :

La fonction flèche n'a pas son propre ceci, donc c'est ceci : ceci du contexte lorsqu'elle est définie
La fonction ordinaire a son propre ceci, donc c'est ceci : ceci du contexte contexte lorsqu'il est exécuté

Regardons d'abord le premier. Une façon d'écrire :

1. onClick = { this.handleClick } + fonction flèche

Le code ci-dessous est : ajouter un événement onclick (un complete jsx) pour un bouton

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

Cliquez sur le bouton et imprimez le pointeur vers examplePage this:

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

Analyse :

• Lorsque le bouton est cliqué, l'événement handleClick est appelé fonction de gestion,
• Parce que handleClick est une fonction flèche, c'est donc le ceci du contexte lorsqu'il est défini,
• handleClick est défini dans la classe examplePage,
• donc cela pointe vers examplePage
• Voyons si la fonction flèche est remplacée par une fonction normale Situation :

2 onClick = { this.handleClick.bind(this) } + fonction ordinaire.

Voyons d'abord ce que console.log(this) affichera si bind(this) n'est pas utilisé :

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

Cliquez sur le bouton et imprimez ceci :

this: undefined

Analyse :

• Lorsque l'on clique sur le bouton, la fonction de traitement d'événement handleClick est appelée,
• Parce que handleClick est une fonction ordinaire, c'est donc le contexte d'exécution,
• handleClick est exécuté lorsqu'un bouton est cliqué sur la page. la page html
• Donc, ceci n'est pas défini et ne pointe pas vers l'exemplePage

Remarque : dans la version stricte, la valeur par défaut n'est plus une fenêtre, mais undéfini
Le code du module est toujours un code en mode strict.
Toutes les parties de a ClassDeclaration ou ClassExpression sont du code en mode strict.

Vous devez donc utiliser bind pour changer ce pointeur, c'est-à-dire :

render() {
    return (
        <p>
        // 用bind改变this指向
           <Button onClick = { this.handleClick.bind(this) }>click me</Button>
        </p>
    )}

Analyse :

• Lorsque vous cliquez sur le bouton, appelez la fonction de traitement d'événement handleClick, via la liaison (), transmet ceci de la fonction render (pointant vers la classe examplePage) en tant que variable dans handleClick. À l'origine, handleClick est une fonction ordinaire, et c'est le this du contexte d'exécution (c'est-à-dire undefined ), mais parce que bind(this) est passé. in - - cela pointait vers examplePage
• Donc, pour le moment, cela pointe vers examplePage, ce qui résout le problème de son indéfini
• Après avoir compris les deux ci-dessus, le dernier est facile à comprendre

3. { (params) => this.handleClick(params) } + Des fonctions ordinaires/fonctions fléchées peuvent être utilisées

render() {
    return (
        <p>
        // 通过箭头函数传参
           <Button onClick = { (params) => this.handleClick(params) }></Button>
        </p>
    )}

Analyse :

Passer des paramètres via des fonctions fléchées équivaut à une liaison onClick Une fonction flèche est définie

Quand le bouton est cliqué, la fonction flèche (params) => this.handleClick(params) est appelée, c'est donc le this du contexte lorsqu'il est défini,

• handleClick est défini dans la classe examplePage,
• Donc ceci pointe vers examplePage
• Selon cette idée, tant que l'événement de réponse onClick est écrit avec une fonction de flèche, lorsqu'il est appelé, cela pointe vers la classe du composant, et il n'y aura pas de problème
• Ensuite, lorsqu'aucun paramètre n'est transmis, écrivez simplement :

• <Button onClick = { () => this.handleClick() }></Button>

Mais ce n'est pas faisable, car réagir analysera directement () => this.handleClick(), handleClick sera appelé, ce qui équivaut à onClick = "Le résultat de l'appel de handleClick"

Donc, quand aucun paramètre n'est transmis, vous ne pouvez écrire que comme ceci :

<Button onClick = { this.handleClick }></Button>

Résumé

Il est possible de répondre aux trois premières questions

• 什么情况下需要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视频教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!