react 封装表格组件_React Form组件杂谈

欢迎关注我的公众号睿Talk，获取我最新的文章：

一、前言

对于网页系统来说，表单提交是一种很常见的与用户交互的方式，比如提交订单的时候，需要输入收件人、手机号、地址等信息，又或者对系统进行设置的时候，需要填写一些个人偏好的信息。 表单提交是一种结构化的操作，可以通过封装一些通用的功能达到简化开发的目的。本文将讨论Form表单组件设计的思路，并结合有赞的ZentForm组件介绍具体的实现方式。本文所涉及的代码都是基于React v15的版本。

二、Form组件功能

一般来说，Form组件的功能包括以下几点：

表单布局

表单字段封装

表单验证&错误提示

表单提交

下面将对每个部分的实现方式做详细介绍。

表单布局

常用的表单布局一般有3种方式：

行内布局

水平布局

垂直布局

实现方式比较简单，嵌套css就行。比如form的结构是这样：

对应3种布局，只需要在form标签增加对应的class：

相应的，要定义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组件等。当现有的字段不能满足需求时，可以自定义字段。

表单的字段一般包括两部分，一部分是标题，另一部分是内容。ZentForm通过getControlGroup这一高阶函数对结构和样式做了一些封装，它的入参是要显示的组件：

export default Control => {

render() {

return (

{required ? * : null}

{label}

{showError && (

{props.error}

)}

{notice &&

{notice}

}

{helpDesc &&

{helpDesc}

}

);

}

}

这里用到的label和error等信息，是通过Field组件传入的：

label="预约门店："

name="dept"

component={CustomizedComp}

validatio