图标 onClick 问题答案

【问题标题】：icon onClick issue图标 onClick 问题
【发布时间】：2017-07-03 13:12:51
【问题描述】：

我有两个图标来确定我的 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 中或根本不包装？

非常感谢！

【问题讨论】：

我很确定我做到了。让我再试一次。
我猜你想在 el.无论如何，它不起作用（Uncaught ReferenceError: id is not defined）。
另外你不应该在render()中绑定处理函数。如果你使用 babel，最好的做法是 in the constructor or with property initializer syntax。

标签： reactjs meteor onclick icons

【解决方案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>

【讨论】：