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

Transmission de valeurs aux événements onClick dans React

Dans React, transmettre des valeurs aux événements onClick peut être difficile, conduisant à une sortie inattendue de la console. Cet article explore deux méthodes pour résoudre ce problème.

Méthode 1 : Utilisation des fonctions fléchées

L'approche la plus simple consiste à utiliser des fonctions fléchées, qui capturent le contexte correct pour le événement :

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

Méthode 2 : Créer un Sous-composant

Une solution plus structurée consiste à créer un sous-composant qui gère l'événement onClick :

Sous-composant (ES6)

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

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

Composant principal (ES6)

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

Ancienne méthode pour ES5

Dans ES5, vous pouvez utiliser .bind :

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

Par en utilisant ces méthodes, vous pouvez transmettre efficacement des valeurs aux événements onClick dans vos applications React.

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!