React添加事件

React添加事件,和DOM上添加事件類似,但又有細微的不同.

React添加事件,需要註意:

1.React的事件命名採用小駝峰(camelCase)的命名方式,DOM採用的是純小寫的方式;

2.使用JSX語法時,需要傳入一個函數作為事件的處理函數,DOM傳入的是一個字元串(雖然DOM中傳入的事件名稱也可以是函數名稱,但數據類型還是一個字元串)

DOM元素添加事件

<a href="#" onclick="testClick();">點擊我</a>

React中添加事件

<button onClick={this.testClick}>點擊我</button>

React中不能通過返回false來阻止元素的預設行為,只能通過顯示的設置preventDefault()來阻止預設的行為,而DOM中阻止元素預設行為的方式有兩種:一種是內聯腳本直接返回false,另外一種是事件處理函數中顯示調用preventDefault方法.

DOM中阻止預設行為的方式:

<a href="http://www.baidu.com" onclick="return false;">點擊我</a>

<!--註意傳入的參數需要是固定的event,不能修改為其他的值-->
<a href="http://www.baidu.com" onclick="testClick(event);">點擊我</a>
<script>
    function testClick(e) {
        console.log("處理一些其他事情");
        e.preventDefault();
    }
</script>

React中阻止元素預設行為的方法:

testClick(e){
    console.log("處理些其他事情");
    e.preventDefault();
}
<a href="http://www.baidu.com" onClick={this.testClick}>點擊我</a>

事件處理函數中不需要傳入任何參數.

React中元素綁定事件

主要有個this的指向問題,在以類的繼承方式定義的組件中,事件處理函數中的this並不是指向當前的組件.如果我們直接在React元素中使用this就會報異常,因為this並不是指向該組件.那麼我們就需要手動的將this指向到當前組件,才可以使用this,將this綁定到當前組件常用的方法有4中:

1.通過箭頭函數

<a href="http://www.mop.com" onClick={(e) => this.testClick(e)}>點擊我</a>

2.將事件處理函數使用箭頭函數的方法來寫

testClick = (e) => {
    console.log("處理點事情");
    e.preventDefault();
}
<a href="http://www.baidu.com" onClick={this.testClick}>點擊我吧</a>

3.在調用的地方綁定通過bind綁定;

<a href="http://www.baidu.com" onClick={this.handleClickEvent.bind(this)}>點擊我</a>

4.在構造函數constructor中提前綁定;

    constructor(props) {
        super(props);
        this.state = {
            name: this.props.name,
            date: new Date(),
            id: this.props.id
        };
        this.handleClickEvent = this.handleClickEvent.bind(this);
    }

<a href="http://www.baidu.com" onClick={this.handleClickEvent}>點擊我吧</a>

向事件處理函數傳遞參數

很多操作中,我們都需要向事件的處理函數傳遞參數,如在刪除或標記一條數據的時候,需要把當前數據的ID傳遞給事件處理函數,讓它知道去處理哪條數據.

常用的傳遞數值的方式有兩種:

1.箭頭函數的方式

delUser(id, e){
    console.log(id);
}
<a href="http://www.baidu.com" onClick={(e) => this.delUser(this.state.id, e)}>刪除</a>

2.通過bind向監聽函數傳參,需要註意在類組件中定義的監聽函數,事件對象e要在傳遞參數的後面

delUser(id, e){
    console.log(id);
}
<a href="http://www.baidu.com" onClick={this.delUser.bind(this, this.state.id)}>刪除</a>

其實無論是使用箭頭函數,還是通過bind綁定監聽事件的方式傳參,事件響應函數中事件對象e,在參數列表中都是排在最後.

goRenren(id,name, e){
    console.log(id);
    console.log(name);
}
<button onClick={(e) => this.goRenren(this.state.id,this.state.name, e)}>刪除</button>