javascript - 使用动态参数绑定(bind)方法

Question

这个问题已经有答案了:

Pass multiple parameters to event handlers in React (2 个回答)

已关闭 5 年前。

我想绑定(bind)我的clickHandler出于性能原因，在我的构造函数中，希望将索引传递给单击处理程序，而 render() .

constructor(){
  this.clickHandler = this.clickHandler.bind(this);
}

render(){
  array.map(item,index)=>{
     <input onclick={this.clickHandler} />   //Here i want to pass the item & index as args
  }
}

有什么建议吗？

Answer 1

创建一个处理程序，然后在 onClick 属性上调用它并从那里传递索引。

示例

// Creates and returns a function to be called with click event
clickHandler = index => event => {
  console.log(index)
}

<input onClick={this.clickHander(index)} />

或

clickHandler = (index, event) => {
 // handle here
}

<input onClick={() => this.clickHander(index, event)} />

如果您使用的是 ES5，请使用常规函数