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}>

还有另一种方法可以做到更清洁，更正确吗？这两种感觉都像黑客一样：特别是在JSX中使用bind。

Answer 1

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

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

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

工作和绑定一样，可能会更清楚一些。绝对比依赖jquery更好。

Answer 2

您可能遇到的另一种情况是在回调中需要正确的“this”指针，一些任意参数和事件对象本身。在这种情况下，你可以这样做：

<button onClick={(event) => this.handleAction('arbitrary-data', event)}> ... </button>

handleAction(data, event) {
  event.preventDefault()
  // this.state.something
  console.log(`data ${data}`)
}

在JSX点击

2 个答案: