时间戳

首页 > 解决方案 > 如何传递反应列表项以作为 onClick 的参数

javascript - 如何传递反应列表项以作为 onClick 的参数

问题描述

我想知道如何将参数作为参数传递给 onClick 函数反应列表元素

这是我的清单。

const items = this.state.tableData.items.map(
      (item, index) => <td key={index} onClick={this.getItem}>{item.name}</td>
    );

这是我定义我的功能

constructor(props) {
    super(props);
    this.state = {
      tableData: this.props.items
    };
    this.getItem = this.getItem.bind(this);

  }

这是我的功能。

 getItem(item) {
    console.log(item)
  }

我不想在单击我呈现列表的项目上获取项目详细信息。

我试图让onClick={this.getItem(item)}我通过这种方式获得项目详细信息，但不是在 onClick。当我打开我的页面时，只记录所有项目详细信息控制台。

我能做些什么 ？

标签： javascriptreactjs

解决方案

有两种常用方法：使用箭头函数，或使用bind：

箭头功能：

const items = this.state.tableData.items.map(
  (item, index) => <td key={index} onClick={e => this.getItem(item, e)}>{item.name}</td>
);

bind：

const items = this.state.tableData.items.map(
  (item, index) => <td key={index} onClick={this.getItem.bind(this, item)}>{item.name}</td>
);

在上述两种情况下，getItem都会将项目作为其第一个参数，将事件对象作为其第二个参数。

推荐阅读