基于react hooks,zarm组件库配置开发h5表单页面的实例代码

时间：2021-09-05 15:17:42

最近使用React Hooks结合zarm组件库，基于js对象配置方式开发了大量的h5表单页面。大家都知道h5表单功能无非就是表单数据的收集，验证，提交，回显编辑，通常排列方式也是自上向下一行一列的方式显示 ， 所以一开始就考虑封装一个配置化的页面生成方案，目前已经有多个项目基于此方式配置开发上线，思路和实现分享一下。

使用场景

任意包含表单的h5页面（使用zarm库，或自行适配自己的库）

目标

  • 代码实现简单和简洁
  • 基于配置
  • 新手上手快，无学习成本
  • 老手易扩展和维护

写之前参考了市面上的一些方案 ，大多都是通过定义json schema方式定义一套格式， 比如阿里的form-render ,通过 JSON Schema定义表单， 有可视化编辑器配置，导出json文件，动态渲染，凡此种种，无出其外。 这里就以阿里form-render为代表，谈谈它的一些缺陷 (优点自行参考官网宣传)

form-render或思路一些缺陷

1.我的目标是h5， form-remder目前仅仅是pc后台表单配置方案，提供了antd和fusion主题，默认不支持h5

2.form-render 支持扩展组件，内部维护了一个映射表 mapping， 映射了数据类型和组件的映射关系,比如antd主题各数据类型和antd组件的映射关系如下,如果我有一套自己的/第三方公司统一使用的h5组件库，需要自己去配置扩展,比较麻烦。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 例如在antd下映射如下：
export const mapping = {
 default: 'input',
 string: 'input',
 array: 'list',
 boolean: 'checkbox',
 integer: 'number',
 number: 'number',
 object: 'map',
 html: 'html',
 'string:upload': 'upload',
 'string:date': 'date',
 'string:dateTime': 'date',
 'string:time': 'date',
 'string:textarea': 'textarea',
 'string:color': 'color',
 'string:image': 'input',
 'string:email': 'input',
 'string:url': 'url',
 'range:date': 'dateRange',
 'range:dateTime': 'dateRange',
 '*?enum': 'select',
 'array?enum': 'checkboxes',
};

如果用过/开发过 form-render 等基于json schema的工具， 有一个需求处理比较麻烦， 比如表单字段联动处理， form-render 提供了有限的几个联动属性，ui:options,ui:disabled,ui:hidden等， 这样算下来，除了需要掌握form-render定义的数据类型，数据类型主题组件映射,及组件关联的各种属性，还要背下额外的联动属性，不外乎多学了一门新编程的复杂程度，所以需要可视化界面辅助编辑。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import React, { useState } from 'react';
import FormRender from 'form-render/lib/antd';
 
const schema = {
 type: 'object',
 properties: {
 select: {
  title: '单选',
  type: 'string',
  enum: ['a', 'b'],
  enumNames: () => ['显示输入框', '隐藏输入框'],
  'ui:disabled': (formData, rootValue) => rootValue.input1.length > 5,
  'ui:widget': 'radio',
 },
 input1: {
  title: '输入框',
  description: '尝试输入超过5个字符',
  type: 'string',
  'ui:hidden': (formData, rootValue) => formData.select === 'b',
 },
 },
};
 
const Demo1 = () => {
 const [formData, setFormData] = useState({});
 return (
 <FormRender schema={schema} formData={formData} onChange={setFormData} />
 );
};
 
export default Demo1;

4.这种配置的json适合非开发人员快速怼出表单功能， 但是不适合开发人员开发扩展，比如我要在两个输入框中间放个图文混排的东西. （另行开发一个自定义组件挂载？）

javascript object 方案

所以以阿里form-render 等以json配置实现动态渲染的方案不能满足 简单，快速，突破，共赢的码农生存准则， 如果把json换成javascript object , 那配置和扩展的能力就不一样了, 这里我们还是借用form-render的总体思路，但是将type从string,number,boolean,array,object,html等数据类型换成Function，一个Function就是一个React组件，比如antd-mobile ,zarm 的Input组件,因为本文基于zarm, 后面都基于zarm展开（对antd-mobile ，vue等第三方移动端/pc端同样适用） ，例如下面的配置

  1. import React, { useState, useEffect } from 'react'; 
  2. import FormRenderer from 'zarm-form-render'; 
  3. import { Input, Cell, Radio, Select, DateSelect, Button, Toast, Panel } from 'zarm'; 
  4.  
  5. export default function App() { 
  6.  const [data, setData] = useState({}); 
  7.  
  8.  const layoutData = [ 
  9.  { 
  10.   type: Input, 
  11.   label: '被保人姓名', 
  12.   placeholder: '请填写', 
  13.   name: 'name', 
  14.  }, 
  15.  { 
  16.   type: Radio.Group, 
  17.   label: '性别', 
  18.   name: 'gender', 
  19.   elProps: { 
  20.   type: 'button', 
  21.   ghost: true, 
  22.   }, 
  23.   items: [ 
  24.   { label: '男', value: 'male' }, 
  25.   { label: '女', value: 'female' }, 
  26.   ], 
  27.  }, 
  28.  { 
  29.   render() { 
  30.   if (!data.gender) return null; 
  31.   return <Cell title="你是" description={data.gender === 'male' ? '男生' : '女生'}></Cell>; 
  32.   }, 
  33.  }, 
  34.  { 
  35.   type: Select, 
  36.   label: '爱吃的水果', 
  37.   name: 'favfood', 
  38.   elProps: { 
  39.   dataSource: [ 
  40.    { label: 'apple', value: 'apple' }, 
  41.    { label: 'banana', value: 'banana' }, 
  42.   ], 
  43.   }, 
  44.  }, 
  45.  
  46.  { 
  47.   type: DateSelect, 
  48.   label: '出生日期', 
  49.   title: '被保人出生日期', 
  50.   placeholder: '请选择', 
  51.   name: 'birthday', 
  52.   min: '1900-01-01', 
  53.  }, 
  54.  { 
  55.   type: Input, 
  56.   label: '手机号', 
  57.   placeholder: '请填写', 
  58.   name: 'mobile', 
  59.  }, 
  60.  { 
  61.   render() { 
  62.   return <div style={{ margin: '30px 6px',}}></div>; 
  63.   }, 
  64.  }, 
  65.  { 
  66.   render() { 
  67.   return ( 
  68.    <Panel title="你录入的内容"> 
  69.    <div style={{ margin: '10px 6px' }}>{JSON.stringify(data)}</div> 
  70.    </Panel> 
  71.   ); 
  72.   }, 
  73.  }, 
  74.  ]; 
  75.  
  76.  return ( 
  77.  <div> 
  78.   <FormRenderer layoutData={layoutData} data={data} setData={setData} /> 
  79.   <Button block theme="primary" onClick={() => Toast.show(JSON.stringify(data))}> 
  80.   确定 
  81.   </Button> 
  82.  </div> 
  83.  ); 
  84. } 

一个表单由一个数组定义，对象type为要渲染的组件, name为收集数据的key,其他属性定义组件其他的props， 基于哪个库，则参考相关库的组件API文档配置即可，对于一些特殊的/不存在的组件我们定义render函数动态渲染，然后就没有其他的了，全部是你熟悉的React， 最终我们可以定义一个自己的FormRender 接受一个一维数组用于从上往下排列表单项(用render不限于表单项，你可以render任意内容)， 一个data用于数据收集，一个setData用于数据更新 (源自React Hooks useState)， 就这么简单，源码如下

  1. import React from 'react'; 
  2. import { Cell, Radio, DateSelect, Select } from 'zarm'; 
  3.  
  4. // 对于无法配置(比如自定义组件，需要根据条件显示的组件等)的情况， 请使用render方法， 
  5. // getJSON() 动态返回json 
  6. // render() 自定义render 
  7.  
  8. export default function FormRenderer({ layoutData, data, setData }) { 
  9.  const onFiledChange = (name, value) => { 
  10.  let v = value; 
  11.  
  12.  // for Select ctrl 
  13.  if (Array.isArray(value)) { 
  14.   v = value.map((item) => item.value)[0]; 
  15.  } 
  16.  
  17.  setData({ ...data, [name]: v }); 
  18.  }; 
  19.  
  20.  const onChangeFactory = (name) => (value) => onFiledChange(name, value); 
  21.  
  22.  return ( 
  23.  <div className="renderer"> 
  24.   {layoutData.map((item, idx) => { 
  25.   if (typeof item.getJSON === 'function') { 
  26.    item = item.getJSON(); 
  27.   } 
  28.   if (typeof item !== 'object' || !item) return null; 
  29.   const { 
  30.    name, 
  31.    type, 
  32.    description, 
  33.    items, 
  34.    elProps = {}, 
  35.    cellProps = {}, 
  36.    render, 
  37.    ...props 
  38.   } = item; 
  39.  
  40.   if (typeof render === 'function') { 
  41.    return render(); 
  42.   } 
  43.  
  44.   let children = []; 
  45.   if (Array.isArray(items) && type === Radio.Group) { 
  46.    children = items.map((it, idx1) => ( 
  47.    <Radio value={it.value} key={idx1}> 
  48.     {it.label} 
  49.    </Radio> 
  50.    )); 
  51.   } 
  52.  
  53.   props.value = data[name]; 
  54.   props.onChange = onChangeFactory(name); 
  55.  
  56.   if (type === Select) { 
  57.    props.dataSource = items; 
  58.   } 
  59.   if (type === DateSelect || type === Select) { 
  60.    props.onOk = props.onChange; 
  61.    delete props.onChange; 
  62.    props.onChange = elProps.onChange; 
  63.   } 
  64.  
  65.   return ( 
  66.    <Cell key={idx} title={item.label} description={description} {...cellProps} name={name}> 
  67.    {React.createElement(type, { ...props, ...elProps }, ...children)} 
  68.    </Cell> 
  69.   ); 
  70.   })} 
  71.  </div> 
  72.  ); 
  73. } 

配置说明

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import * as React from 'react';
export interface Item {
 type: React.Component; // 组件类型， 比如Input 等
 name: string; // key
 items?: Array<any>; // dataSource
 description: string; // Cell description
 label?: string; // Cell title
 render?: () => React.ReactNode; //自定义 render
 getJSON?: () => object | null; // 动态返回Item配置
 elProps?: object; // 组件的props配置 , 比如type为Input, elProps则会配置到Input
 cellProps?: object; // cell props配置
}
export interface Props {
 layoutData: Array<Item>; // 表单布局配置
 data: object; // 数据存储,name作为key,内容为value
 setData: () => void; // 数据更新
}
interface FormRenderer extends React.FC<Props> {}
declare const FormRenderer: FormRenderer;
export default FormRenderer;

上述代码效果如下

基于react hooks,zarm组件库配置开发h5表单页面的实例代码

基于react hooks,zarm组件库配置开发h5表单页面的实例代码

基于react hooks,zarm组件库配置开发h5表单页面的实例代码

这种方式唯一缺点是无法像json一样持久化存储在数据库 ，优点是可以统一移动和pc端表单配置式开发，少了大量的样板代码和嵌套，可以统一处理数据的存取和验证,表单项的排列方式 。

到此这篇关于基于react hooks,zarm组件库配置开发h5表单页面的文章就介绍到这了,更多相关react hooks,zarm组件库内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

原文链接：https://www.cnblogs.com/leonwang/archive/2021/04/05/14618280.html

标签：

相关文章