【React】事件处理

React元素事件处理和DOM元素语法区别：

• React事件的命名采用小驼峰
• JSX语法传入一个函数作为事件处理函数
• React中不能通过返回false的方法组织默认行为，必须显式的使用preventDefault

function ActionLink() {
  function handleClick(e) {    
  	e.preventDefault();    
  	console.log('The link was clicked.');  
  }
  return (
    <a href="#" onClick={handleClick}>      
    	Click me
    </a>
  );
}

当使用ES6 class语法定义一个组件时候，通常的做法是将时间处理函数声明为class中的方法。
例如：下面的 Toggle 组件会渲染一个让用户切换开关状态的按钮：

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

            this.handleClick = this.handleClick.bind(this);
        }

        handleClick() {
            this.setState(state => ({
                isToggleOn: !state.isToggleOn
            }));
        }

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

    ReactDOM.render(
        <Toggle/>,
        document.getElementById('root')
    );

在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。
通常情况下，如果你没有在方法后面添加 ()，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。

向事件处理程序传递参数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。

在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。