react學習（三）- 事件系統

小渝人兒發表於2017-01-14
React事件

自動繫結

bind方法

這個方法可以幫助我們繫結事件處理器內的this,並可以向事件處理器中傳遞引數。

import React, {Component} from `react`;
class App extends Component{
    handClick(e, arg) {
        console.log(e, arg);
    }
    
    render() {
        return <button onClick={this.handleClick.bind(this, `test`)}>Test</button>;
    }
}

構造器內宣告

在元件的構造器內完成了this的繫結，這個繫結方式的好處在於僅需要進行一次繫結，而不需要每次呼叫事件監聽器時去執行繫結操作

import React, {Component} from react;
class App extends Component {
    handleClick(e) {
        console.log(e);
        // 在構造器內完成繫結
        this.handClick = this.handClick.bind(this);
    }
    
    render() {
        return <button onClick={this.handClick}>Test</button>
    }
}

箭頭函式

箭頭函式不僅是函式的”語法糖”, 它還自動繫結了定義此函式作用域的this, 因此我們不需要再對它使用bind方法。比如，以下方式就行執行。

import React, {Component} from `react`;

class App extends Component {
    const handClick = (e) => {
        console.log(e);
    };
    
    render () {
        return <button onClick={this.handleClick}>Test</button>;
    }
}

或

import React, {Component} from `react`;

class App extends Component {
    handClick(e) {
        console.log(e);
    }
    
    render () {
        return <button onClick={() => this.handClick()}>Test</button>;
    }
}

在React 中使用原生事件

import React, {Component} from `react`;

class NativeEventDemo extends Component {
    componentDidMount() {
        this.refs.button.addEventsListener(`click`, e=>{
            handClick(e);
        })
    }
    
    handClick(e) {
        console.log(e);
    }
    
    componentWillUnmount() {
        this.refs.button.removeEventListener(`click`);
    }
    
    render() {
        return <button ref="button">Test</button>
    }
}

儘量避免在React中混用合成事件和原生DOM事件。另外，用reactEvent.nativeEvent.stopPropagation()來阻止冒泡是不行的。阻止React事件冒泡的行為只用用於React合成事件系統中，且沒 辦法阻止原生事件的冒泡。反之，在原生事件中的阻止冒泡行為，卻可以組織React合成事件的傳播。

實際上，React的合成事件系統只是原生DOM事件系統的一個子集。它僅僅實現了DOM Level3的事件介面，並且統一了瀏覽器間的相容問題。有些事件React並沒有實現，或者受某些限制沒辦法去實現，比如window的resize事件。

對於無法使用React合成事件的場景，我們海需要使用原生事件來實現。

阻止原生事件傳播需要使用e.preventDefault(), 不過對於不支援該方法的瀏覽器(IE9以下)，只能使用e.cancelBubble = true來阻止。而在React合成事件中，只需要使用e.preventDefault()即可。

相關文章