Explication détaillée de quatre façons de lier des événements à cela dans les compétences react_javascript

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 maximiser le CPU et la mémoire. Lors de l'utilisation de la classe es6 ou d'une fonction pure, cette liaison automatique n'existe plus et nous devons implémenter manuellement cette liaison.

La liaison d'événements React est similaire à la liaison d'événements DOM, les différences sont les suivantes :

1. Les événements React sont nommés en casse chameau, tandis que la dénomination des événements DOM est en minuscules

. 2. Avec jsx, transmettez une fonction comme 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('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>
  );
 }
}

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

Recommandations associées :

Une brève introduction à cela et à soi-même en php

Quatre modes de cette valeur en JS

Comment l'utiliser dans les balises html

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!