react中如何傳遞事件對象

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

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

向事件處理程序傳遞參數(事件對象)

給函數傳遞額外參數：以下兩種方式

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

上述兩種方式是等價的，分別通過 箭頭函數 和 Function.prototype.bind 來實現。

上面兩個例子中，參數 e 作為 React 事件對象將會被作為第二個參數進行傳遞。通過箭頭函數的方式，事件對象必須顯式的進行傳遞，但是通過 bind 的方式，事件對象以及更多的參數將會被隱式的進行傳遞。

值得注意的是，通過 bind 方式向監聽函數傳參，在類組件中定義的監聽函數，事件對象 e 要排在所傳遞參數的后面，例如:

class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    }
    
    preventPop(name, e){    //事件對象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>
        );
    }
}

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