Question

我正在做一个React项目。我试图将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);
  }
}

Answer 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={()=>{ ... }}

如何在React的类组件内部将参数传递给方法？

1 个答案: