React事件处理

1、事件绑定

React元素的事件处理和DOM元素的很相似，但是有一点语法上的不同。React元素的事件绑定采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写，如onclick, React里的事件是驼峰如onClick，React的事件并不是原生事件，而是合成事件。

在React里，类组件与函数组件绑定事件是差不多的，只是在类组件中绑定事件函数的时候需要用到this，代表指向当前的类的引用，在函数中不需要调用this关键词。

有函数组件事件绑定、类组件事件绑定

2、事件对象

React中可以通过事件处理函数的参数获取到事件对象，它的事件对象叫做：合成事件，即兼容所有浏览器，无需担心跨浏览器兼容问题。这个对象和之前学习的事件对象所包含的方法和属性都基本一致，不同的是React中的事件对象并不是浏览器提供的，而是它自己内部所构建的。此事件对象拥有和浏览器原生事件相同的接口，包括stopPropagation()和 preventDefault()，如果我们想获取到原生事件对象，可以通过e.nativeEvent属性来进行获取。

import React, { Component } from "react";
​
class App extends Component {
    render() {
        return (
            <div>
                <button onClick={this.clickHandler}>老林说</button>
            </div>
        );
    }
    clickHandler(e) {
        console.log("海纳百川有容乃大，壁立千仞无欲则刚。");
        // react构建的事件对象
        console.log(e);
        // 浏览器原生的事件对象
        console.log(e.nativeEvent);
        // 事件对应的DOM对象
        console.log(e.target);
        // 事件对应的DOM对象的内嵌HTML
        console.log(e.target.innerHTML);
    }
}
​
export default App;

3、this指向

在JSX事件函数方法中的this，默认不会绑定this指向。如果我们忘记绑定，当我们调用这个函数的时候this的值为undefined。所以使用时一定要绑定好this的指向！

4、事件方法传参

React中对于事件方法传参的方式有着非常灵活的用法。以传递参数username值为zhangsan为例，常见的有以下几种方式：

通过this.事件方法.bind（bind为绑定数据）方式进行传参（推荐），例如：

onClick={this.clickHandler.bind(this,'zhangsan')}

对应的形参接收：clickHandler(username)

onClick={this.clickHandler.bind(this,'zhangsan')}

对应的形参接收：clickHandler(username,event)

使用箭头函数传参，例如：

onClick={() => this.事件方法('zhangsan')}

对应的形参接收：clickHandler(username)

onClick={(e) => this.事件方法('zhangsan',e)}

对应的形参接收：clickHandler(username,event)