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 :

4b9fb64e28bfa25ce78ce203c03210ee
Click me
5db79b134e9f6b82c0b36e0489ee08ed
class ActionLink extends React.Component {
constructor(props) {
super(props);
}
handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
render() {
return (
ce9b621fb6ec54951e7c0b38768a414bClick Me...5db79b134e9f6b82c0b36e0489ee08ed
);
}
}

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 (
   09d51344e61201747f3f0f261639e806
    c157f1b0f1442cd3850bd9da57d4d18e54bdf357c58b8a65c66d7c19c8e4d114
   94b3e26ee717c64999d7867364b1b4a3
  );
 }
}

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!