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

Question

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

这是我的 list 。

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。当我打开我的页面时，只记录所有项目详细信息控制台。

我能做什么？

Answer 1

常用的方法有两种:使用箭头函数，或者使用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 都会将项目作为第一个参数，将事件对象作为第二个参数。