Wie kann ich Werte effizient an onClick-Ereignishandler in React JS übergeben?

React js onClick-Ereigniswertübergabe

Bei der Arbeit mit React js-Ereignissen kann es schwierig sein, Werte an Methoden zu übergeben. Wir werden dieses Problem angehen, indem wir mehrere Lösungen untersuchen.

1. Pfeilfunktionen verwenden

Die einfachste Methode ist die Verwendung einer Pfeilfunktion:

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

Pfeilfunktionen erstellen neue Funktionen, die handleSort mit den entsprechenden Parametern aufrufen. Dieser Ansatz generiert jedoch jedes Mal eine neue Funktion, was zu unnötigen erneuten Renderings führt.

2. Extrahieren in Unterkomponenten (empfohlen)

Ein besserer Ansatz besteht darin, die onClick-Ereignisbehandlung in eine Unterkomponente zu extrahieren. Erstellen Sie eine Unterkomponente, die den Handler und den Wert als Requisiten übernimmt:

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

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

Übergeben Sie in der Hauptkomponente die Handler- und Wert-Requisiten an die Unterkomponente:

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

This stellt sicher, dass sich die Handler-Referenz nie ändert, wodurch unnötige erneute Renderings minimiert werden.

3. ES5-Methode (alt)

Wenn Sie ES5 verwenden, können Sie die Funktion wie folgt an den Komponentenkontext binden:

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

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