前言
对于网页系统来说，表单提交是一种很常见的与用户交互的方式，比如提交订单的时候，需要输入收件人、手机号、地址等信息，又或者对系统进行设置的时候，需要填写一些个人偏好的信息。 表单提交是一种结构化的操作，可以通过封装一些通用的功能达到简化开发的目的。本文将讨论Form表单组件设计的思路，并结合有赞的ZentForm组件介绍具体的实现方式。本文所涉及的代码都是基于React v15的版本。
Form组件功能
一般来说，Form组件的功能包括以下几点：
- 表单布局
- 表单字段
- 封装表单验证&错误提示
- 表单提交
下面将对每个部分的实现方式做详细介绍。
表单布局
常用的表单布局一般有3种方式：
行内布局
水平布局
垂直布局
实现方式比较简单，嵌套css就行。比如form的结构是这样：
<form class="form"> <label class="label"/> <field class="field"/> </form>
对应3种布局，只需要在form标签增加对应的class：
<!--行内布局--> <form class="form inline"> <label class="label"/> <field class="field"/> </form> <!--水平布局--> <form class="form horizontal"> <label class="label"/> <field class="field"/> </form> <!--垂直布局--> <form class="form vertical"> <label class="label"/> <field class="field"/> </form>
相应的，要定义3种布局的css：
.inline .label {
display: inline-block;
...
}
.inline .field {
display: inline-block;
...
}
.horizontal .label {
display: inline-block;
...
}
.horizontal .field {
display: inline-block;
...
}
.vertical .label {
display: block;
...
}
.vertical .field {
display: block;
...
}
表单字段封装
字段封装部分一般是对组件库的组件针对Form再做一层封装，如Input组件、Select组件、Checkbox组件等。当现有的字段不能满足需求时，可以自定义字段。