React之事件处理

React 元素的事件处理和DOM元素的很相似，但是有一点语法上的不同：

事件处理

1. React 事件绑定属性的命名采用驼峰式写法，而不是小写

2. 如果采用JSX的语法需要传入一个函数作为事件处理函数，而不是一个字符串（DOM元素的写法）

<button onClick={activateLasers}>
    Activate Lasers
</button>

【注意】在React中不能使用返回 false 的方式阻止默认行为。必须明确的使用preventDefault

绑定this

可以使用 bind()方法 this.handleClick = this.handleClick.bind(this); 也可以使用属性初始化器语法

handleClick = () => {
    console.log('this is:', this);
}

如果没有使用属性初始化器语法，可以在回调函数中使用箭头函数

class LoggingButton extends React.Component{
    handleClick() {
        console.log('this is:', this);
    }
    render() {
        return(
            <button onClick={(e) => this.handleClick(e)}>
              click me
            </button>
        );
    }
}

使用这个语法有个问题就是每次LoggingButton 渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

传递参数

以下两种方式都可以向事件处理程序传递参数；

<button onClick={(e) => this.deleteRow(id, e)}>
    click me
</button>

<button onClick={this.deleteRow.bind(this, id)}>
    click me
</button>

【注意】通过bind方式向监听函数传参，在类组件中定义的监听函数，事件对象e要排在所传递参数的后面

class Popper extends React.Component{
    preventPop(name, e) {
        e.preventDefault();
        alert(name);
    }
    render() {
        return(
            <a href="https://reactjs.org" onClick={this.preventPop.bind(this.state.name)}>
                Click
            </a>
        );
    }
}

【原生事件对象】

handleClick(e) {
    e.nativeEvent
}