Comment transmettre des valeurs aux événements onClick dans React ?

Passer des valeurs aux événements onClick dans React

Le gestionnaire d'événements onClick de React n'accepte pas nativement les paramètres. Lorsque onClick est déclenché, il affiche les propriétés d'événement synthétiques dépourvues de tout transfert de valeur explicite. Pour surmonter ce problème, plusieurs approches peuvent être utilisées :

Fonction flèche (facile)

Une fonction flèche peut être utilisée pour transmettre manuellement des valeurs au gestionnaire onClick :

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

Cela crée une nouvelle fonction qui appelle handleSort avec les paramètres souhaités. Cependant, une création excessive de fonctions peut entraîner des rendus inutiles.

Sous-composant (méthode optimale)

L'extraction du gestionnaire dans un sous-composant améliore les performances en empêchant excessif re-rendu :

Sous-composant

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

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

Composant principal

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

ES5 Legacy Approche (Easy Way)

Pour la compatibilité ES5, l'approche suivante peut transmettre des valeurs en utilisant .bind :

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

En choisissant la technique la plus appropriée, vous pouvez transmettre efficacement des valeurs aux événements onClick dans React et éviter le problème décrit dans la question.

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!