快捷導(dǎo)航

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

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

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

摘要

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

  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>

你會(huì)發(fā)現(xiàn)，在頁(yè)面加載的時(shí)候，2222已經(jīng)被打印出來(lái)了。但是點(diǎn)擊按鈕的時(shí)候并沒(méi)有效果。

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

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

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

1.箭頭函數(shù)

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

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

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

2.函數(shù)柯里化

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

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

通過(guò)這種方式，我們?cè)趏nClick綁定的時(shí)候，可以不用寫箭頭函數(shù)了，比較好看一點(diǎn)。但是原理和剛剛那種方式是一個(gè)樣子的。

3.bind方法

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

OK，如果bind有這個(gè)特性，我們就可以利用它解決這個(gè)問(wèn)題。

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

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

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

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

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')}>說(shuō)話</button>
        <button onClick={() => {this.speak('qnmlgbd')}}>說(shuō)話</button>
        <button onClick={this.loud.bind(this,'qnmlgbd')}>說(shuō)話</button>
      </div>
    )
  }
}

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

您可能感興趣的文章: