在JSX点击中传递数据的正确方式

Correct way to pass data in JSX clicks

本文关键字：数据 方式 JSX      更新时间：2024-05-15

第一个 

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

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

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

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

和绑定一样有效，可能会更清楚一点。肯定比依赖jquery要好。

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

<button onClick={(event) => this.handleAction('arbitrary-data', event)}> ... </button>
handleAction(data, event) {
  event.preventDefault()
  // this.state.something
  console.log(`data ${data}`)
}
相关文章：