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

Werte an onClick-Ereignisse in React übergeben

Der onClick-Ereignishandler von React akzeptiert nativ keine Parameter. Wenn onClick ausgelöst wird, werden synthetische Ereigniseigenschaften ohne explizite Wertübertragung angezeigt. Um dies zu überwinden, können mehrere Ansätze verwendet werden:

Pfeilfunktion (einfache Möglichkeit)

Eine Pfeilfunktion kann verwendet werden, um Werte manuell an den onClick-Handler zu übergeben:

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

Dadurch wird eine neue Funktion erstellt, die handleSort mit den gewünschten Parametern aufruft. Eine übermäßige Funktionserstellung kann jedoch zu unnötigen erneuten Renderings führen.

Unterkomponente (optimale Methode)

Das Extrahieren des Handlers in eine Unterkomponente verbessert die Leistung, indem es verhindert übertrieben Neu-Rendering:

Unterkomponente

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

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

Hauptkomponente

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

ES5 Legacy Ansatz (einfache Möglichkeit)

Aus Gründen der ES5-Kompatibilität kann der folgende Ansatz Werte mit übergeben .bind:

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

Durch Auswahl der am besten geeigneten Technik können Sie Werte effektiv an onClick-Ereignisse in React übergeben und das in der Frage beschriebene Problem vermeiden.

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!