Comment puis-je transmettre une valeur à un événement onClick dans React ?

React js : transmettre une valeur à l'événement onClick

Dans React, accéder aux propriétés de la valeur de l'événement onClick peut être difficile, affichant des messages de console tels que "SyntheticMouseEvent {...}" au lieu de la valeur souhaitée. Ce problème peut être résolu en comprenant le mécanisme de gestion des événements de React et en employant des techniques appropriées.

Facile

Pour transmettre une valeur à l'événement onClick à l'aide d'une fonction fléchée, suivez cette approche :

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

Cela crée une nouvelle fonction qui appelle handleSort avec les paramètres corrects.

Mieux Way

Pour des performances optimales, il est recommandé d'extraire la gestion onClick dans un sous-composant. De cette façon, la référence du gestionnaire ne changera pas et les rendus inutiles seront évités.

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

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!