Explication détaillée des quatre façons de lier des événements à cela dans React

Cet article présente principalement les quatre méthodes de liaison d'événements dans React. Maintenant, je le partage avec vous et vous donne une référence.

Dans le composant React, le contexte de chaque méthode pointera vers l'instance du composant, c'est-à-dire qu'elle est automatiquement liée au composant actuel, et React mettra également en cache cette référence pour atteindre le maximum de CPU et changement de capacité de mémoire. Lors de l'utilisation de la classe es6 ou d'une fonction pure, cette liaison automatique n'existe plus. Nous devons implémenter manuellement la liaison de cette

La liaison d'événement React est similaire à la liaison d'événement DOM, la différence est la suivante :

1. Les événements React sont nommés en casse chameau et les événements DOM sont nommés en minuscules

2 Via jsx, transmettez une fonction en tant que gestionnaire d'événements au lieu d'une chaîne.

3. Les événements React ne peuvent pas empêcher les événements par défaut en renvoyant false. Vous devez appeler explicitement PreventDefault()

L'exemple suivant :

<a href="#" onclick="console.log(&#39;The link was clicked.&#39;); return false">
Click me
</a>

class ActionLink extends React.Component {
constructor(props) {
super(props);
}

handleClick(e) {
e.preventDefault();
console.log(&#39;The link was clicked.&#39;);
}

render() {
return (
<a href="#" onClick={this.handleClick.bind(this)}>Click Me...</a>
);
}

}

ps : classe de composant React. La méthode ne le lie pas à l'instance du composant par défaut et doit être liée manuellement.

Voici plusieurs méthodes de liaison :

méthode de liaison

La liaison directe est la liaison bind(this), mais la le problème causé par cela est que la liaison sera à nouveau liée à chaque fois qu'elle est rendue

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {
  };
 }

 del(){
  console.log('del')
 }

 render() {
  return (
   <p className="home">
    <span onClick={this.del.bind(this)}></span>
   </p>
  );
 }
}

Liaison au sein du constructeur

Le L'avantage de lier ceci dans le constructeur est qu'il ne doit être lié qu'une seule fois, évitant ainsi d'être lié à chaque fois qu'il est rendu. Il n'est pas nécessaire de se lier à nouveau lorsque la fonction est réutilisée ailleurs

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {

  };
  this.del=this.del.bind(this)
 }

 del(){
  console.log('del')
 }

 render() {
  return (
   <p className="home">
    <span onClick={this.del}></span>
   </p>
  );
 }
}

. :: Impossible de transmettre les paramètres

Si vous ne transmettez pas de paramètres, vous pouvez également utiliser les doubles deux-points

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {

  };
 }

 del(){
  console.log('del')
 }

 render() {
  return (
   <p className="home">
    <span onClick={::this.del}></span>
   </p>
  );
 }
}

Fonction flèche La liaison des fonctions fléchées

n'est pas seulement un « sucre syntaxique » pour les fonctions, elle lie également automatiquement ce qui définit la portée de cette fonction, car nous n'avons plus besoin de lier des méthodes dessus :

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {

  };

 }

 del=()=>{
  console.log('del')
 }

 render() {
  return (
   <p className="home">
    <span onClick={this.del}></span>
   </p>
  );
 }
}

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Exemple de téléchargement d'images dans la base de données et de leur affichage sur la page implémentée par vue

Après avoir résolu le problème en utilisant le routage vue.js Problème invalide

Comment analyser parfaitement les données en js

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!