如何在 React 中向 onClick 事件传递值？

在 React 中将值传递给 onClick 事件

在 React 中，将值传递给 onClick 事件可能具有挑战性，导致意外的控制台输出。本文探讨了解决此问题的两种方法。

方法 1：使用箭头函数

最简单的方法是使用箭头函数，它可以捕获正确的上下文事件：

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

方法 2：创建子组件

更结构化的解决方案是创建一个处理 onClick 事件的子组件：

子组件（ES6）

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

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

主要组件(ES6)

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

ES5 的旧方法

在 ES5 中，你可以使用 .bind:

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

通过利用这些方法，您可以有效地将值传递给 React 应用程序中的 onClick 事件。

以上是如何在 React 中向 onClick 事件传递值？的详细内容。更多信息请关注PHP中文网其他相关文章！