Question

出于性能原因，我想将clickHandler绑定到构造函数中，并希望在render()时将索引传递给Click Handler。

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 prop上调用它，然后从那里传递索引。

示例

// 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，请使用常规功能

Answer 2

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

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

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

Answer 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创建一个新的函数回调。

Answer 4

尝试一下。：）

"geometry": {
    "type": "Point",
    "coordinates": [
        52.5219000000000022509993868879973888397216796875,                        
        13.413199999999999789679350215010344982147216796875
    ]
}

用动态参数绑定方法

4 个答案: