React-事件綁定

React事件綁定相似於DOM事件綁定，區別以下：

1. React事件的用駝峯法命名，DOM事件事件命名是小寫
2. 經過jsx，傳遞一個函數做爲event handler，而不是一個字符串。
3. React事件不能經過返回false來阻止默認事件，須要顯式調用preventDefault()

以下實例：

<a href="#" onclick="console.log('The link was clicked.'); return false">
          Click me
        </a>

     class ActionLink extends React.Component {
        constructor(props) {
            super(props);
        }

        handleClick(e) {
            e.preventDefault();
            console.log('The link was clicked.');
        }

        render() {
            return (
                <a href="#" onClick={this.handleClick.bind(this)}>Click Me...</a>
            );
        }

        }

ps:React組件類的方法沒有默認綁定this到組件實例，須要手動綁定。

綁定類的方法this的三種方法

在調用方法的地方直接經過調用bind方法來綁定,也能夠在構造函數裏面直接用bind方法綁定this.

class Toggle extends React.Component {
        constructor(props) {
            super(props);
            this.state = { isToggleOn: true };
        //this.toggleHander = this.toggleHander.bind(this);
        }

        toggleHander() {
            this.setState(preState => ({
                isToggleOn: !preState.isToggleOn
            }));
        }

        render() {
            return (
                <button onClick = { this.toggleHander.bind(this) }>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>
        );
        }

        }

類的屬性初始化語法(該用法還未寫入es標準，有兼容問題)

class Toggle extends React.Component {
        constructor(props) {
            super(props);
            this.state = { isToggleOn: true };
        }

       toggleHander = () => {
        this.setState(preState => ({
            isToggleOn: !preState.isToggleOn
        }));
    }

    render() {
        return (
            <button onClick = { this.toggleHander}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>
        );
        }
    }

箭頭函數

class Toggle extends React.Component {
        constructor(props) {
            super(props);
            this.state = { isToggleOn: true };
        //this.toggleHander = this.toggleHander.bind(this);
        }

        toggleHander() {
            this.setState(preState => ({
                isToggleOn: !preState.isToggleOn
            }));
        }

        render() {
            return (
                <button onClick = { (e) => this.toggleHander(e) }>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>
            );
            }

      }

ps：推薦在構造函數中綁定相關方法的this指向，或者將方法寫成類字段的形式。避免某些方法做爲屬性向子組件傳遞引發的一些問題。