React实例----一个表单验证比较复杂的页面

前言：这阵子看了两本CSS的书~对于CSS层叠，定位，继承等机制基本上都了解了，就想着自己写几个页面~正好自己就写了写CSS样式，然后用React渲染出来~

闲话不多说，简单说一说这个页面，希望能对大家有些帮助；

代码已经上传到GitHub，地址为：https://github.com/sven36/React

这个地址可以看一下效果：https://sven36.github.io/React/React.html

这里简单说一下：页面比较简单，麻烦的地方在于输入框特别多，而且表单验证规则比较繁琐，比如输入框失去焦点要对当前内容进行判断，不符合规则边框标红，选择单身则配偶信息不允许操作，还有需要输入数字的，自动保留两位小数，有的输入只允许中文等等；

这些代码基本上都在Input这个组件里面写的；就在sk.js这个文件；bundle.js是webpack编译的reat代码，有环境的可以编译一下；

其实我在这个过程中，感觉最值得仔细思考的是React的组件化思想；就是这些html元素应该如何组合，哪些元素应该是一个组件，以达到组件复用；

在页面前三分之一，我是只用input一个组件，每一行基本都是<dd><ul><li><Input (React组件)/></li></ul><dd>这样的结构，最后一部分我把ul封装成一个组件<dd><Ul (React组件) /></dd>  ;   <Ul (React组件) />又根据传入参数不同渲染成<li><Input (React组件)/></li>

或<li><Select(React组件)/></li>组件；这部分大家感兴趣可以看一下；

 还有就是CSS样式也是适配主流浏览器的~针对Ie8等版本落后的浏览器我也添加了一些回退样式，保证效果不会太差~