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真難用，自己電腦上展示得好好的，貼過來就亂七八糟的……

總結

以上是生活随笔為你收集整理的React事件优雅绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。