图标点击问题

Question

我有两个图标决定了我的 Meteor React 项目中一堆组件的视图

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

我想要一些类似的东西：

<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或根本不包裹它？

非常感谢！

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>