快捷導(dǎo)航

React事件處理過程中傳參的實現(xiàn)方法

更新時間：2022年10月31日 10:19:12 作者：搞前端的小菜

這篇文章主要介紹了React事件處理過程中傳參的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

摘要

首先我們知道，在React中，是通過小駝峰式給元素綁定事件：

  fn = ()=>{
    //執(zhí)行代碼
  }
  button onClick={this.fn}>111</button>

但是如果有Vue的基礎(chǔ)，可以很清楚的看到二者的區(qū)別。在Vue中，我們可以直接給fn傳遞參數(shù)。

但是如果在React中我們這么做：

  fn = (value)=>{
    //執(zhí)行代碼
    console.log(value)
  }
  button onClick={this.fn('2222')}>111</button>

你會發(fā)現(xiàn)，在頁面加載的時候，2222已經(jīng)被打印出來了。但是點擊按鈕的時候并沒有效果。

這說明，該方法并沒有被綁定在按鈕上，而是在按鈕加載的時候直接調(diào)用了。

而這一點也很好理解，React并沒有做向Vue這方面的處理，它是直接調(diào)用完，將返回值綁定給了onClick。所以這里我們要記住，事件綁定的時候，一定要綁定的是一個函數(shù)。

OK，現(xiàn)在了解了問題所在，如果我想在調(diào)用方法的時候傳遞參數(shù)，應(yīng)該怎么做呢？

1.箭頭函數(shù)

第一個方法，如果我們在給按鈕綁定事件的時候，外層綁定的是一個箭頭函數(shù)，里面才是我們寫的方法，似乎就能完美的解決問題了：

  speak = (value) =>{
    alert(value)
  }
  <button onClick={() => {this.speak('qnmlgbd')}}>說話</button>

通過箭頭函數(shù)的方式，直接給onClick綁定的就是我們定義的speak方法，并且傳遞好了參數(shù)。

2.函數(shù)柯里化

那如果箭頭函數(shù)可以，似乎我們直接在方法里面返回一個方法，也沒有什么問題。

	  say = (value)=>{
	    return ()=>{
	      alert(value)
	    }
	  }
	 <button onClick={this.say('qnmlgbd')}>說話</button>

通過這種方式，我們在onClick綁定的時候，可以不用寫箭頭函數(shù)了，比較好看一點。但是原理和剛剛那種方式是一個樣子的。

3.bind方法

我們知道，bind方法是改變方法的this指向，并且返回的是一個方法。不會直接調(diào)用。

OK，如果bind有這個特性，我們就可以利用它解決這個問題。

 loud(value){
   alert(value)
 }
<button onClick={this.loud.bind(this,'qnmlgbd')}>說話</button>

這里可以注意一下，loud方法在定義的時候沒有采用箭頭函數(shù)的方式。而之前的兩個方法在定義的時候都使用了箭頭函數(shù)的方式。

這是因為，在React中，如果定義函數(shù)不使用箭頭函數(shù)，函數(shù)里面的this會是綁定事件的元素，而不是React組件。但是如果用bind方法進行事件綁定，就不需要考慮這個問題了。

最后我們總的看一下這三種方式的差別：

export default class Child extends Component {
  say = (value)=>{
    return ()=>{
      alert(value)
    }
  }
  speak = (value) =>{
    alert(value)
  }
  loud(value){
    alert(value)
  }
  render() {
    return (
      <div>
        <button onClick={this.say('qnmlgbd')}>說話</button>
        <button onClick={() => {this.speak('qnmlgbd')}}>說話</button>
        <button onClick={this.loud.bind(this,'qnmlgbd')}>說話</button>
      </div>
    )
  }
}

到此這篇關(guān)于React事件處理過程中傳參的實現(xiàn)方法的文章就介紹到這了,更多相關(guān)React事件處理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: