React 事件与表单

事件命名为驼峰式，事件处理方法命名驼峰式 handleclick， handlechange

事件类型

基本事件处理 example

react对原生事件进行了一次封装，命名为 syntheticevent，具备和原生事件相同的属性

通用属性

特殊属性举例

冒泡特性举列

例如有一个登陆框，我们想要在点击登陆框以外的范围时将登陆框关闭

我们先在 document 上添加 click 事件处理 logindialog 的隐藏，然后在 logindialog 中也监听 click 事件，然后利用 stopimmediatepropagation 阻止相同元素上的同类型事件，就能实现需求的效果。

可见 react 的事件都是代理在 document 上的。由上面代码可以看出，如果我们把事件监听放在 document.body 上时，logindialog 中的阻止同类型事件触发就失效了。

一个例子来比较异步处理事件时原生和 syntheticevent 的区别

syntheticevent 持久化相关 react 源码解析

syntheticevent 对象会在处理完判断 ispersistent，为 false 就释放对象

release 的相关实现，它会调用对象的 destructor 方法

syntheticevent 的析构函数实现，将属性置为了 null

而 syntheticevent 中 persist 方法做的就是将 ispersistent 变为一个返回 true 的函数

表单是运用事件的一个很好的场景， 我们来看一个基本的表单实现

如果我们运行上面的代码会发现，render 会输出很多次，每一次 state 变动都会触发重新 render，这可能会对性能造成一定的影响。

同时这样的表单在表单值控制，表单校验的能力上都较弱，因此我们看看有没有什么更好地实现

运行这个实例上看，我们直接改变了 inputcomponent 的 state 从而不触发外部 form 的 render， 相关数据和操作由 context 传入，

能够很好地对验证时机和表单数据进行控制

redux-form 的例子

redux-form 用 field 来替代了每个输入域，那我们重点来看下 field

connectedfield 会关联 _reduxform 的 initialvalues, getformstate， 看看 _reduxform 从何而来，是用 context 从上层传递下来的，详见如下代码

总体下来看，redux-from 和我们自己上面自己实现的那个高级一点的 form 原理是不是微微有点像呢~，它也是将一个 _reduxform 由 context 传递到子组件然后将子组件的 state 托管到 _reduxform 里面