Wie kann ich in React einen Wert an ein onClick-Ereignis übergeben?

React js: Wert an onClick-Ereignis übergeben

In React kann der Zugriff auf onClick-Ereigniswerteigenschaften schwierig sein, da Konsolenmeldungen wie „SyntheticMouseEvent {...}“ angezeigt werden. anstelle des gewünschten Wertes. Dies kann gelöst werden, indem man den Ereignisverarbeitungsmechanismus von React versteht und geeignete Techniken anwendet.

Einfache Möglichkeit

Um mithilfe einer Pfeilfunktion einen Wert an das onClick-Ereignis zu übergeben, folgen Sie diesem Ansatz:

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

Dadurch wird eine neue Funktion erstellt, die handleSort mit den richtigen Parametern aufruft.

Besser Weg

Für eine optimale Leistung wird empfohlen, die onClick-Verarbeitung in eine Unterkomponente zu extrahieren. Auf diese Weise ändert sich die Handler-Referenz nicht und unnötige erneute Renderings werden vermieden.

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

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