如何将参数传递给 React 中类组件内的方法？ [复制]答案

【问题标题】：How to pass arguments to methods inside class components in React? [duplicate]如何将参数传递给 React 中类组件内的方法？ [复制]
【发布时间】：2019-10-13 14:35:19
【问题描述】：

我正在做一个反应项目。我试图将 item.id 作为参数传递给事件处理程序。但我不知道如何将值作为参数发送以及如何访问方法中的值。我正在做的程序如下所示。有人可以帮我解决这个问题吗？

class ItemList extends React.Component {
  constructor(props) {
    super(props);

    this.onClick = this.onClick.bind(this);
  }

  render() {
    return <div>
      {this.props.items.map(item =>
        <button key={item.id} item={item} onClick={this.onClick} />
      )}
    </div>;
  }

  onClick(itemId) {
    console.log('Clicked item:', itemId);
  }
}

【问题讨论】：

这样写：onClick={() => this.onClick(item.id)} 或 onClick={this.onClick.bind(this, item.id)}

标签： reactjs

【解决方案1】：

render() {
    return <div>
      {this.props.items.map(item =>
        <button key={item.id} item={item} onClick={()=>{this.onClick(item.id)}} />
      )}
    </div>;
  }

  onClick(itemId) {
    console.log('Clicked item:', itemId);
  }

你可以使用{()=>{...}}

通知

如果你写这样的代码onClick={this.onClick(item.id)}，渲染后会立即执行。

所以，你应该继续像这样包装它们onClick={()=>{ ... }}

【讨论】：

感谢您的回复，现在正在运行。我还有一个疑问。当我们按下列表的元素时，我试图打勾。为了做到这一点，我需要一个与项目（列表变量）大小相同的布尔数组。但是列表变量项是动态的，所以如何初始化布尔变量值为'false'。谁能帮帮我？
@Gauranga 你的意思是如果items 没有项目，你不想执行map()？
是的，项目的大小是动态的。
@Gauranga 很简单，{(this.props.items || []).map(item => <button key={item.id} item={item} onClick={this.onClick} /> 也许我不明白你到底想要什么。
以上代码适用于这两种情况。我想你没有得到我的问题。我想根据项目列表变量的大小创建一个动态布尔数组，以便我可以在 onClick 方法中使用它