Redux Form

redux-form 是一个帮助你管理表单数据的工具, 它集成了数据管理, 数据验证, 事件处理等一系列工作, 用起来也是非常的方便, 参照官网的例子, 很快你就能上手.

Webshim

这是一个可以帮助你跨浏览器做数据校验, 以及样式渲染的. 特别是像 DatePicker 这种组建, 也许你在 Chrome 中样式良好, 工作正常, 但是一到了 IE下, 就一塌糊涂, 有时候你的 DatePicker 压根儿不渲染, 就是一个最原始的 input 框.

调用

直接上重点:

1.在你的表单渲染前, 也就是 componentWillMount 里面, 调用 webshim 的配置, 官网例子可以看详细配置, 根据自己情况设置

webshims.setOptions('forms-ext',...)

2. 在需要 webshim 处理的组件(比如 datePicker)渲染后, 也就是 componentDidMount 里调用处理方法, 也就是 webshim/js-webshim/dev/polyfiller 里的 initDatePicker 方法.

你可能遇到的问题

 

 无法找到 jQuery?

1. 很多有版本问题, 3.0 以上会出现找不到 getClientRects 方法的问题, 这是一个 BUG, 目前只针对 jquery UI 做了相应的修复.
2. 2.0 以下的版本没有暴露 jQuery 为一个 module, 导致 webpack 无法找到这个 module. 表现为编译 can’t resolve jquery…
3. 建议的版本是2.1.0, 兼容 webpack 和 webshim, 以及 redux-form

有些依赖包只暴露了内部变量, 没法外部引用?

1. 尝试搜寻新版本, 看有没有修复
2. 将源码拷贝出来, 自己改写

启动后出现 form-core.js报错, 无法找到?

1. 很明显, 你并没有把 webshim 下的 shims 方法拷贝到和你 编译后的js同级目录. 为 webpack 写一个 task, 拷贝 webshim/js-webshim/minified/shims 文件夹所有到编译目录. 这个官网有说明

样式跨浏览器工作了, 但是 redux-form 拿不到数据验证?

1. 这是因为 webshim 也提供了一套验证系统, 会在 redux-form 之前拿到数据, 并且截取不再传递给 redux-form. 解决方案是手动把数据赋值给 redux-form
2.  不能直接使用 onchange 事件在任何一个 input 上, webshim 在跨浏览器渲染的时候, 会重新渲染 DOM 节点, onchange 事件会失效. 解决方案是在组件渲染完成后, 用 jquery 调用 change 方法, 手动绑定一个 change 事件.
3. 利用redux-form 自带的 action 方法, 改变 store 存储的值

   import {change} from 'redux-form';
   ...
   dispatch(change('yourFormId', 'fieldName', 'fieldValue'));

   其中 formId 是你用 reduxForm包裹你的表单组件用到的 id.

无法触发数据验证?

1. 利用 redux-form 自带的 touch 方法, 将组件设置为 touched , 然后触发验证

   import {touch} from 'redux-form';
   ...
   dispatch(touch('yourFormId', true));

至此, 你的表单在 IE 和 Chrome 下都良好工作了, 数据验证也一切正常!