日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React事件處理過程中傳參的實現方法_React

作者：搞前端的小菜 ? 更新時間： 2022-12-03 編程語言

摘要

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

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

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

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

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

你會發現，在頁面加載的時候，2222已經被打印出來了。但是點擊按鈕的時候并沒有效果。

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

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

OK，現在了解了問題所在，如果我想在調用方法的時候傳遞參數，應該怎么做呢？

1.箭頭函數

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

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

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

2.函數柯里化

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

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

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

3.bind方法

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

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

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

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

這是因為，在React中，如果定義函數不使用箭頭函數，函數里面的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>
    )
  }
}

原文鏈接：https://blog.csdn.net/weixin_46726346/article/details/126785941

欄目分類
最近更新