使用动态参数绑定方法[重复]答案

【问题标题】：bind a method with dynamic arguments [duplicate]使用动态参数绑定方法[重复]
【发布时间】：2018-12-21 14:43:30
【问题描述】：

出于性能原因，我想在构造函数中绑定我的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
  }
}

有什么建议吗？

【问题讨论】：

() => this.clickHandler(item,index)

标签： javascript reactjs

【解决方案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，请使用常规函数

【讨论】：

【解决方案2】：

围绕它创建一个匿名函数，这样您就可以将参数传递给您的函数

     <input onclick={() => this.clickHandler(item,index)} />

如果你的编译器不支持粗箭头语法，你可以

     <input onclick={function() {this.clickHandler(item,index)}} />

【讨论】：

【解决方案3】：

您可能会使用一种柯里化函数：

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

    clickHandler(index) {
        return function(e) {
          // do click things
        }.bind(this);
    }

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

你无法避免为每个 index 创建一个新的回调函数。

【讨论】：

【解决方案4】：

试试这个。 :)

render() {
    array.map((item,index) => <input onclick={() => this.clickHandler(item,index)} />)
}

【讨论】：

确定我能做到。但是如果我采用这种方法，我必须在每次调用render() 方法时调用寄存器clickHandler method。这会影响性能，这就是为什么我想将它绑定到constructor