Plusieurs façons de lier des événements de réaction à cela

Cette fois, je vais vous présenter plusieurs façons de lier des événements de réaction à cela. Quelles sont les précautions pour lier des événements de réaction à cela ? Voici des cas pratiques, jetons un coup d'œil.

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 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 string .

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('The link was clicked.');
}
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>
  );
 }
}

ConstructeurLiaison interne

Liez ceci dans le constructeur. L'avantage 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 le 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 utiliser des doubles-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>
  );
 }
}

Liaison de la fonction flèche

La fonction flèche n'est pas seulement le « sucre syntaxique » de la fonction, elle lie également automatiquement celui qui définit la portée de la fonction , car nous n'avons plus besoin de les lier :

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>
  );
 }
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

JS génère un code QR

JS implémente la commutation aléatoire de l'identifiant WeChat

String.prototype.format Comment utiliser la concaténation de chaînes

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!