React Form组件的实现封装杂谈 前言 对于网页系统来说,表单提交是一种很常见的与用户交互的方式,比如提交订单的时候,需要输入收件人、手机号、地址等信息,又或者对系统进行设置的时候,需要填写一些个人偏好的信息。 表单提交是一种结构化的操作,可以通过封装一些通用的功能达到简化开发的目的。本文将讨论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 ({props.error}
)} {notice &&{notice}
} {helpDesc &&{helpDesc}
}