React事件优雅绑定

606 阅读2分钟

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会报错,提示不可以在Functionprototype上自定义方法,这个看你了…😂😂😂

吐槽:掘金的markdown真难用,自己电脑上展示得好好的,贴过来就乱七八糟的……