react中如何傳遞事件對(duì)象

這篇文章主要介紹了react中如何傳遞事件對(duì)象，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

react中傳遞事件對(duì)象的方法：1、使用“{(e) => this.deleteRow(id, e)}”方式傳遞；2、通過(guò)“{this.deleteRow.bind(this, id)}”方式傳遞。

向事件處理程序傳遞參數(shù)(事件對(duì)象)

給函數(shù)傳遞額外參數(shù)：以下兩種方式

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上述兩種方式是等價(jià)的，分別通過(guò) 箭頭函數(shù) 和 Function.prototype.bind 來(lái)實(shí)現(xiàn)。

上面兩個(gè)例子中，參數(shù) e 作為 React 事件對(duì)象將會(huì)被作為第二個(gè)參數(shù)進(jìn)行傳遞。通過(guò)箭頭函數(shù)的方式，事件對(duì)象必須顯式的進(jìn)行傳遞，但是通過(guò) bind 的方式，事件對(duì)象以及更多的參數(shù)將會(huì)被隱式的進(jìn)行傳遞。

值得注意的是，通過(guò) bind 方式向監(jiān)聽函數(shù)傳參，在類組件中定義的監(jiān)聽函數(shù)，事件對(duì)象 e 要排在所傳遞參數(shù)的后面，例如:

class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    }
    
    preventPop(name, e){    //事件對(duì)象e要放在最后
        e.preventDefault();
        alert(name);
    }
    
    render(){
        return (
            <div>
                <p>hello</p>
                {/* Pass params via bind() method. */}
                <a href="https://reactjs.org" onClick={
                this.preventPop.bind(this,this.state.name)
                }>Click</a>
            </div>
        );
    }
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享react中如何傳遞事件對(duì)象內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!