如何使用ES6语法将额外参数传递给onClick事件？
例如:
handleRemove = (e) => {
}
render() {
}
我想将id传递给handleRemove函数,如下所示:
Michelle Til.. 160
请记住onClick={ ... },这...是一个JavaScript表达式.所以
... onClick={this.handleRemove(id)}
是相同的
var val = this.handleRemove(id);
... onClick={val}
换句话说,您this.handleRemove(id)立即调用,并将该值传递给onClick,这不是您想要的.
相反,您希望使用已预先填充的参数之一创建新函数; 基本上,你想要以下内容:
var newFn = function() {
var args = Array.prototype.slice.call(arguments);
// args[0] contains the event object
this.handleRemove.apply(this, [id].concat(args));
}
... onClick={newFn}
有一种方法可以在ES5 JavaScript中表达这一点:Function.prototype.bind.
... onClick={this.handleRemove.bind(this, id)}
如果您使用React.createClass,React会自动this为您绑定实例方法,除非您将其更改为,否则它可能会抱怨this.handleRemove.bind(null, id).
您也可以简单地定义内联函数; 如果您的环境或转换器支持它,则使箭头功能缩短:
... onClick={() => this.handleRemove(id)}
如果您需要访问该活动,您可以直接传递:
... onClick={(evt) => this.handleRemove(id, evt)}
值得一提的是,箭头函数每次都会导致重新渲染,因为每个渲染都会创建新函数 (38认同)
需要注意的是,在render方法中添加箭头函数将在每个新渲染上创建一个新函数.但它会起作用.最好在构造函数中创建新的绑定函数,并将新函数添加到render方法中. (2认同)
Praym.. 40
使用button元素的value属性传递id,如
然后在handleRemove中,从事件中读取值:
handleRemove(event) {
...
remove(event.target.value);
...
}
这样,每次重新渲染此组件时,都可以避免创建新函数(与使用箭头函数相比).
请记住onClick={ ... },这...是一个JavaScript表达式.所以
... onClick={this.handleRemove(id)}
是相同的
var val = this.handleRemove(id);
... onClick={val}
换句话说,您this.handleRemove(id)立即调用,并将该值传递给onClick,这不是您想要的.
相反,您希望使用已预先填充的参数之一创建新函数; 基本上,你想要以下内容:
var newFn = function() {
var args = Array.prototype.slice.call(arguments);
// args[0] contains the event object
this.handleRemove.apply(this, [id].concat(args));
}
... onClick={newFn}
有一种方法可以在ES5 JavaScript中表达这一点:Function.prototype.bind.
... onClick={this.handleRemove.bind(this, id)}
如果您使用React.createClass,React会自动this为您绑定实例方法,除非您将其更改为,否则它可能会抱怨this.handleRemove.bind(null, id).
您也可以简单地定义内联函数; 如果您的环境或转换器支持它,则使箭头功能缩短:
... onClick={() => this.handleRemove(id)}
如果您需要访问该活动,您可以直接传递:
... onClick={(evt) => this.handleRemove(id, evt)}
使用button元素的value属性传递id,如
然后在handleRemove中,从事件中读取值:
handleRemove(event) {
...
remove(event.target.value);
...
}
这样,每次重新渲染此组件时,都可以避免创建新函数(与使用箭头函数相比).
使用箭头功能如下:
onClick={this.handleRemove.bind(this, id)}
到目前为止,没有人提到的是使handleRemove返回一个函数.
你可以这样做:
handleRemove = id => event => {
// Do stuff with id and event
}
// render...
return
但是,所有这些解决方案都有在每个渲染上创建新功能的缺点.最好为Button创建一个新组件,它将分别传递给id它handleRemove.
京公网安备 11010802040832号 | 京ICP备19059560号-6 