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指向，或者将方法写成类字段的形式。避免某些方法作为属性向子组件传递引起的一些问题。