React事件优雅绑定

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指向，可是这个操做有两个弊端：

1. 代码量增长，须要在constructer声明；
2. 在须要传递参数的时候仍是须要从新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真难用，本身电脑上展现得好好的，贴过来就乱七八糟的……