react中怎麼傳遞事件對象

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

本教學操作環境：windows7系統、react17.0.1版本，Dell G3電腦。

推薦：《javascript基礎教學》

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

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

<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中怎麼傳遞事件對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！