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

Übergabe von Werten an onClick-Ereignisse in React JS

Der onClick-Ereignishandler von React ermöglicht keine direkte Wertübergabe. Wenn darauf geklickt wird, wird ein SyntheticMouseEvent-Objekt auf der Konsole angezeigt. Um Werte effektiv zu übergeben, folgen Sie diesen Lösungen:

Einfacher Weg

Verwenden Sie eine Pfeilfunktion:

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

Dadurch wird eine Funktion erstellt, die handleSort mit den gewünschten Parametern aufruft.

Besserer Weg

Extrahieren Sie den Code in a Unterkomponente:

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

Dies gewährleistet ein erneutes Rendern nur bei Bedarf.

Old Easy Way (ES5)

Binden Sie die Funktion zum Komponentenkontext:

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

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