Comment puis-je transmettre efficacement des valeurs aux gestionnaires d'événements onClick dans React JS ?

Transmission de la valeur de l'événement React js onClick

Lorsque vous travaillez avec des événements React js, il peut être difficile de transmettre des valeurs aux méthodes. Nous aborderons ce problème en explorant plusieurs solutions.

1. Utilisation des fonctions fléchées

La méthode la plus simple consiste à utiliser une fonction fléchée :

return (
  <th value={column} onClick={() => this.handleSort(column)}>{column}</th>
);

Les fonctions fléchées créent de nouvelles fonctions qui appellent handleSort avec les paramètres appropriés. Cependant, cette approche génère à chaque fois une nouvelle fonction, conduisant à des rendus inutiles.

2. Extraction vers des sous-composants (recommandé)

Une meilleure approche consiste à extraire la gestion des événements onClick dans un sous-composant. Créez un sous-composant qui prend le gestionnaire et la valeur comme accessoires :

class TableHeader extends Component {
  handleClick = () => {
    this.props.onHeaderClick(this.props.value);
  };

  render() {
    return (
      <th>
        <th onClick={this.handleClick}>{this.props.column}</th>
      </th>
    );
  }
}

Dans le composant principal, transmettez le gestionnaire et les accessoires de valeur au sous-composant :

{this.props.defaultColumns.map((column) => (
  <TableHeader
    value={column}
    onHeaderClick={this.handleSort}
  />
))}

Ceci garantit que la référence du gestionnaire ne change jamais, minimisant ainsi les nouveaux rendus inutiles.

3. Méthode ES5 (ancienne)

Si vous utilisez ES5, vous pouvez lier la fonction au contexte du composant comme ceci :

return (
  <th value={column} onClick={this.handleSort.bind(this, column)}>{column}</th>
);

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!