在 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 处理程序，只需正常调用它并让函数 return 成为一个函数：

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 点击中传递数据的正确方法

Correct way to pass data in JSX clicks

javascript

jsx

reactjs

react-jsx