下面分别示例三种绑定方式。

在构造函数中的绑定

按照 ES6 class 方式，定义一个函数方法 bindInCtor ：

JSX 模板中，通过 this.bindInCtor 来调用触发：

注意，进入方法时，内部的 this 引用 undefined，会出现如下等错误情况：

需要通过 bind 来硬绑定：

public class fields 特性绑定

方法调用还是和之前一样：

不同的是在方法定义的地方使用 ()=>{} 的形式，这方式称为：public class fields

虽然该特性在 create-react-app 中默认打开，可这是个实验特性。

在 JSX 模板中通过 callback 绑定

区别上述两个，此方式只需在 JSX 增加一个回调函数即可。

并且默认参数是 event，最好不要漏掉。

事件传参

箭头=>方式

显式的添加一个回调绑定方法，定义 event 和业务数据。

因为参数是自定义的，所以顺序可以按照喜好编排。另外，this 绑定不需要再构造器或者 class fields 特性做额外控制。

bind 绑定方式

使用 bind 来强制绑定 this 引用。

绑定方式同样不需要做额外处理，因为没有显式定义 event ，所以 React 会以第二参数默认传入：

native 事件

SyntheticEvent 概要

通常我们需要阻止 a 标签的默认跳转事件，或者是冒泡事件。

React 帮我们封装了这些事件，通过 SyntheticEvent 包装器合成，其实例将被传递到事件处理函数。

所以我们能在 event 看到这些事件：

示例，如何阻止 a 标签跳转：

不要尝试控制 SyntheticEvent

因为 SyntheticEvent 是由 React 合成的，所以不要试图直接在此对象上取某些属性做判断。

可能执行到对应逻辑时，这些属性值就不对了。

支持的事件

摘自官网，供以后查询用：