Question

我想知道如何将参数作为参数传递给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的项目详细信息。

我试图通过这种方式使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都将项目作为第一个参数，将事件对象作为第二个参数。

Answer 2

这只是一个替代答案。将item分成自己的组件是一种替代方法。这样，您可以传递onClick函数而不绑定它，然后像这样在Item组件中使用它。

const items = [{ id: 1, name: "foo" }, { id: 2, name: "bar" }];

const Item = ({ item, getItem}) => {
  const handleClick = () => getItem(item);
  return (
    <div onClick={handleClick}>{item.name}</div>
  )
}

const App = () => {
  const getItem = item => console.log(item.id);
  return (
    <div className="App">
      {items.map(item => (
        <Item key={item.id} item={item} getItem={getItem} />
      ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

如果items太多，则由于没有使用bind或任何内置箭头功能，如果它们的道具都没有更改，则可以避免重新渲染所有项目。但是，如您所见，它需要一个单独的组件和更多的编码。

Answer 3

功能组件将赢得类。因此最好与之配合使用：

      onClick={  ( item.id) => handleclick( item.id, [...])

编辑1 在此处单击要用作挂钩的Handleclick（例如useState上的G. SetValue）。

Nb：故意编写肮脏的代码以打击可怕的copypasta SO实践。谢谢redditors。阅读代码，然后阅读模因。

如何传递响应列表项以充当onClick

3 个答案: