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

Transmission de valeurs aux événements onClick dans React JS

Le gestionnaire d'événements onClick de React ne permet pas directement la transmission de valeurs. Lorsque vous cliquez dessus, il affiche un objet SyntheticMouseEvent sur la console. Pour transmettre des valeurs efficacement, suivez ces solutions :

Facile

Utilisez une fonction fléchée :

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

Cela crée une fonction qui appelle handleSort avec les paramètres souhaités.

Meilleure façon

Extraire le code dans un sous-composant :

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

Cela garantit le re-rendu seulement lorsque cela est nécessaire.

Old Easy Way (ES5)

Relier la fonction au contexte du composant :

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!