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 }
Copier après la connexion
handleClick est défini comme ceci :
Copier après la connexion
ou
// poignéeCliquez utilise (fonction ordinaire) pour définir
onClick = { this .handleClick.bind(this) }
Copier après la connexion
handleClick est défini comme ceci :
Copier après la connexion
// handleClick peut être défini en utilisant /(fonction ordinaire)
onClick = { (params ) => this.handleClick(params) }
Copier après la connexion
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
handleClick = () => {
console.log(this);
}
render() {
return (
<p>
<Button onClick = { this.handleClick }>click me</Button>
</p>
)
}}export default examplePage;
|
Copier après la connexion
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é :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
handleClick () {
console.log(this);
}
render() {
return (
<p>
<Button onClick = { this.handleClick }>click me</Button>
</p>
)
}}export default examplePage;
|
Copier après la connexion
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 :
1 2 3 4 5 6 7 | render() {
return (
<p>
<Button onClick = { this.handleClick.bind(this) }>click me</Button>
</p>
)}
|
Copier après la connexion
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
1 2 3 4 5 6 7 | render() {
return (
<p>
<Button onClick = { (params) => this.handleClick(params) }></Button>
</p>
)}
|
Copier après la connexion
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 :
1 | <Button onClick = { () => this.handleClick() }></Button>
|
Copier après la connexion
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 :
1 | <Button onClick = { this.handleClick }></Button>
|
Copier après la connexion
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)吗?
答:用箭头函数 (用箭头函数定义事件处理函数)
1 2 3 4 5 6 7 8 | handleClick = () => {
};
<Button onClick = {this.handleClick}></Button>
<Button onClick = {(param) => this.handleClick(param) }></Button>
|
Copier après la connexion
推荐学习:《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!