javascript - 在 JSX 点击中传递数据的正确方法

Question

第一个

<div tabIndex="0"
  onKeyPress={this.onHandleClick.bind(null, 'first')}
  onClick={this.onHandleClick.bind(null, 'first')}>

第二

onHandleClick = (event) => {
  $(event.currentTarget).data('circle')
}
<div tabIndex="0"
  data-circle="first"
  onClick={this.onHandleClick}>

是否有另一种更干净、正确的方法来做到这一点？这两种感觉都像是 hack:尤其是在 JSX 中使用 bind。

Answer 1

如果您想要将参数传递给您的 onClick 处理程序，只需正常调用它并让函数返回一个函数:

onClick={this.onHandleClick('first')}

onHandleClick(value) {
    return function() {
        // logic that now has access to `value`
    }
}

与绑定(bind)一样有效，可能更清晰一些。绝对比依赖 jquery 更好。