Heim >Web-Frontend >js-Tutorial >Wie übergebe ich Werte an onClick-Ereignisse in React?

Wie übergebe ich Werte an onClick-Ereignisse in React?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-27 00:32:111046Durchsuche

How Do I Pass Values to onClick Events in React?

Werte an onClick-Ereignisse in React übergeben

In React kann das Übergeben von Werten an onClick-Ereignisse eine Herausforderung sein und zu unerwarteten Konsolenausgaben führen. In diesem Artikel werden zwei Methoden zur Lösung dieses Problems untersucht.

Methode 1: Verwendung von Pfeilfunktionen

Der einfachste Ansatz ist die Verwendung von Pfeilfunktionen, die den richtigen Kontext für die erfassen Ereignis:

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

Methode 2: Erstellen eines Unterkomponente

Eine strukturiertere Lösung besteht darin, eine Unterkomponente zu erstellen, die das onClick-Ereignis verarbeitet:

Unterkomponente (ES6)

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

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

Hauptkomponente (ES6)

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

Alte Methode für ES5

In ES5 können Sie .bind verwenden:

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

By Mithilfe dieser Methoden können Sie Werte effektiv an onClick-Ereignisse in Ihren React-Anwendungen übergeben.

Das obige ist der detaillierte Inhalt vonWie übergebe ich Werte an onClick-Ereignisse in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn