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

在 React JS 中向 onClick 事件传递值

React 的 onClick 事件处理程序不允许直接传递值。单击时，它会在控制台上显示 SyntheticMouseEvent 对象。要有效地传递值，请遵循以下解决方案：

简单方法

使用箭头函数：

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

这将创建一个使用所需参数调用handleSort的函数。

更好的方法

将代码提取到子组件：

子组件

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

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

主组件

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

这确保了重新渲染仅在必要时。

老简单方法(ES5)

将函数绑定到组件上下文：

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

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