Wie übergebe ich Werte an onClick-Ereignisse 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!