2018-01-11 19:00 更新(目前最优解)
收到 光 同学的提醒,与其让
ESLint
报错,不如在调用时候做一些修改,上代码,就是在调用事件的时候,重新用箭头函数再包裹一层,拍脑袋表示为啥自己没想到。
render(){
return(
<button
// 修改的部分在这里,我知道这么写注释是不对的,别学我
onClick={()=>{this.handleSubmit(params)}}
>
提交
</button>
)
}
handleSubmit = () =>{
// do something
}
这样真的是,在调用函数的时候使用箭头函数并传递一个参数进去,这样达成了期望的效果,又避免了ESLint的报错,简直6666…
下面的内容只是一些其他方法,随意看看就好…
常规情况下使用React在节点上绑定事件是这样
render(){
return(
<button onClick={this.handleClick.bind(this,params)}>Submit</button>
)
}
handleClick(params){
// do something
}
但是这种情况下每次数据发生变化的时候,都要重新调用render
函数,事件也要重新绑定this
指向,会比较耗费性能,于是出现了下面这种方式
在构造函数内部声明事件方法
constructor(props){
super(props);
// 在构造函数内部声明事件方法
this.handleClick = this.handleClick.bind(this)
}
render(){
return(
<button onClick={this.handleClick}>Submit</button>
)
}
handleClick(params){
// do something
}
这种方法使得在方法在组件调用的时候就在constructer
被声明,当数据进行重新渲染时,事件不会在重新绑定this
指向,但是这个操作有两个弊端:
- 代码量增加,需要在
constructer
声明; - 在需要传递参数的时候还是需要重新bind(this,params);
在ES6
出现之后,我们可以通过箭头函数=>
来简化this
的指向问题:
render(){
return(
<button onClick={this.handleClick}>Submit</button>
)
}
handleClick = () => {
// do something
}
但是这个方式也只是解决了减少代码量的问题,在需要传参的地方还是需要使用.bind(this,params)
的方式,这就十分尴尬了。
使用ES6+Function.prototype的方法(不推荐,下面还提供了一个方法)
这个时候,我们会想何不为ES6
重写个bind
。箭头函数只写一次,bind
不用传this
,没错!我们就是这么想的!
// 我们在Function的prototype上新建一个fBind方法,并写在入口文件中
Function.prototype.fBind = function(...args){
var Fn = this;
return function(e){
Fn(...args,e);
}
}
然后,我们在组件中写事件和传参就可以变得无比清爽了...
render(){
return(
<button onClick={this.handleWithParams.fBind(params)}>有参数Submit</button>
<button onClick={this.handleWithoutParams}>无Submit</button>
)
}
// 带参数事件
handleWithParams = (params) => {
console.log(params);
// do something
}
// 不带参数事件
handleWithoutParams = () =>{
// do something
}
在不需要传参的地方还是,唯一的缺陷是Eslint会报错,提示不可以在Function
的prototype
上自定义方法,这个看你了…😂😂😂
吐槽:掘金的markdown真难用,自己电脑上展示得好好的,贴过来就乱七八糟的……