reactjs - 图标点击问题

Question

我有两个图标来确定我的 Meteor React 项目中一堆组件的 View

目前，我将两者包装在一个跨度中，每个图标都有一个特定的 onClick 函数。有没有办法只用一个函数来处理这个问题，传入一个 id 作为 Prop ？

我想要这样的东西:

<span id="grid" onClick={this.handleViewBtnClick.bind(this, id)}> 
  <i className="fa fa-th" ></i>
</span> 
<span id="list" onClick={this.handleViewBtnClick.bind(this, id)}>
  <i className="fa fa-align-justify" ></i>
</span>

和:

handleViewBtnClick(id) {
  this.setState({
  view: id
  })
}

但这并没有产生预期的结果，我尝试过的任何其他事情也没有。我唯一让它工作的一次是当我将两个图标包装在一个 button 而不是一个 span 中时。我想我可以让它透明，但有没有办法将它包装在 span 中或根本不包装？

非常感谢!

Answer 1

使用箭头函数:

<span id="grid" onClick={() => this.handleViewBtnClick('first-id')}> 
    <i className="fa fa-th" ></i>
</span> 
<span id="list" onClick={() => this.handleViewBtnClick('second-id')}> 
    <i className="fa fa-align-justify" ></i>
</span>