react 封装表格组件_React-表单验证组件封装（hook）

React(Hook)- 表单验证组件封装

造个轮着(表单验证)，实现方式属个人思想，非最佳实践，欢迎指点

验证插件使用：async-validator

完整代码

代码已打包上传NPM

yarn add rh-hook-form

期望的调用方式

Form组件

目的

表单样式特征可控

暴漏一个验证整个表单的方法

返回整个当前数据

确认一下参数

function XtForm({ labelPosition, className, reft, children })

样式

接受className

labelPosition label位置控制

使用useMemo优化，在labelPosition, className不变的情况下classNameMerge不从新计算，其中top/left/right是类名

const classNameMerge = useMemo(() => {

let classNameMerge;

switch (labelPosition) {

case 'top':

classNameMerge = `${xtForm} ${top} ${className || ''}`;

break;

case 'left':

classNameMerge = `${xtForm} ${left} ${className || ''}`;

break;

case 'right':

classNameMerge = `${xtForm} ${right} ${className || ''}`;

break;

}

return classNameMerge;

}, [labelPosition, className]);

整个表单验证

确认一下思路，为了使每个表单项验证灵活，独立，此处我们将校验放在FormItem上，即表单项各通过async-validator初始化各自的验证实例。

而作为Form通过事件监听的方式，将formItem各自的验证方法收集起来，重而实现验证整个表单的方法

关于整个表单的值(formData),按照验证的思路，表单项自己管理自己的验证与表单值，而Form需要提供一个实时的整个表单(formData)，我依然使用事件通知的形式，在FormItem值改变后，发送给Form来收集

下面是Form的事件监听

需要注意的是 eventKey 可以看作一个不重复的随即值。他的意图是为每个表单创建一个独立的事件监听池(为了一个页面上同时创建多个表单，而公用一个事件池，导致通信错乱)

我们用一个事件监听处理 验证方法和表单项值的接收

function addEventListen() {

const formData = {}; //表单对象(实时的值)

const formCheckList = []; //表单收集各表单项的验证方法

const eventKey = new Date().getTime() + Math.floor(Math.random() *