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指向，或者將方法寫成類字段的形式。避免某些方法作為屬性向子組件傳遞引起的一些問題。