order: 4 group: order: 3 title: 高级用法

toc: false

表单方法（form）

FormRender v1.x 使用了状态内置的模型，所以外部对表单的所有操作都依赖于 form 实例提供的方法。 本篇会 cover 以下这些常用 api：

  1. form.submit
  2. form.setValues
  3. form.setValueByPath
  4. form.setSchemaByPath

以及以下的生命周期

  1. beforeFinish
  2. onFinish

我们写一个最常用的场景：加载一个已经填写完成的表单，从服务端异步获取数据（这里使用 mock）；修改表单并提交新数据给服务端

例 1: 表单与服务端的基本交互

异步加载表单 Schema, 服务端数据填充表单初始值, 提交校验通过后提交数据给服务端

  1. /**
  2.  * transform: true
  3.  * defaultShowCode: true
  4.  */
  5. import React, { useState, useEffect } from 'react';
  6. import { Button, Space, message } from 'antd';
  7. import FormRender, { useForm } from 'form-render';
  8. import { fakeApi, delay } from './utils';
  10. const Demo = () => {
  11.   const form = useForm();
  12.   const [schema, setSchema] = useState({});
  14.   const getRemoteData = () => {
  15.     fakeApi('xxx/getForm').then(_ => {
  16.       form.setValues({ input1: 'hello world', select1: 'c' });
  17.     });
  18.   };
  20.   useEffect(() => {
  21.     // 异步加载表单
  22.     delay(1000).then(_ => {
  23.       setSchema({
  24.         type: 'object',
  25.         properties: {
  26.           input1: {
  27.             title: '简单输入框',
  28.             type: 'string',
  29.             required: true,
  30.           },
  31.           select1: {
  32.             title: '单选',
  33.             type: 'string',
  34.             enum: ['a', 'b', 'c'],
  35.             enumNames: ['早', '中', '晚'],
  36.           },
  37.         },
  38.       });
  39.     });
  40.   }, []);
  42.   const onFinish = (data, errors) => {
  43.     if (errors.length > 0) {
  44.       message.error(
  45.         '校验未通过：' + JSON.stringify(errors.map(item => item.name))
  46.       );
  47.     } else {
  48.       fakeApi('xxx/submit', data).then(_ => message.success('提交成功！'));
  49.     }
  50.   };
  52.   return (
  53.     <div style={{ width: '400px' }}>
  54.       <FormRender form={form} schema={schema} onFinish={onFinish} />
  55.       <Space>
  56.         <Button onClick={getRemoteData}>加载服务端数据</Button>
  57.         <Button type="primary" onClick={form.submit}>
  58.           提交（见console）
  59.         </Button>
  60.       </Space>
  61.     </div>
  62.   );
  63. };
  65. export default Demo;

例 2：服务端校验

服务端校验，通过 beforeFinish 从外部回填 error 信息到表单，注意 beforeFinish 需返回要回填的 error

  1. /**
  2.  * transform: true
  3.  * defaultShowCode: true
  4.  */
  5. import React from 'react';
  6. import { Button, message } from 'antd';
  7. import FormRender, { useForm } from 'form-render';
  8. import { fakeApi } from './utils';
  10. const schema = {
  11.   type: 'object',
  12.   properties: {
  13.     input1: {
  14.       title: '简单输入框',
  15.       type: 'string',
  16.       required: true,
  17.     },
  18.     select1: {
  19.       title: '单选',
  20.       type: 'string',
  21.       enum: ['a', 'b', 'c'],
  22.       enumNames: ['早', '中', '晚'],
  23.     },
  24.   },
  25. };
  27. const Demo = () => {
  28.   const form = useForm();
  30.   const onFinish = (data, errors) => {
  31.     if (errors.length > 0) {
  32.       message.error(
  33.         '校验未通过：' + JSON.stringify(errors.map(item => item.name))
  34.       );
  35.     } else {
  36.       fakeApi('xxx/submit', data).then(_ => message.success('提交成功！'));
  37.     }
  38.   };
  40.   // 服务端校验在这里做
  41.   const beforeFinish = ({ data, errors, schema, ...rest }) => {
  42.     return fakeApi('xxx/validation').then(_ => {
  43.       return { name: 'select1', error: ['外部校验错误'] };
  44.     });
  45.   };
  47.   return (
  48.     <div style={{ width: '400px' }}>
  49.       <FormRender
  50.         form={form}
  51.         schema={schema}
  52.         beforeFinish={beforeFinish}
  53.         onFinish={onFinish}
  54.       />
  55.       <Button type="primary" onClick={form.submit}>
  56.         提交（见console）
  57.       </Button>
  58.     </div>
  59.   );
  60. };
  62. export default Demo;

例 3：bind

接口数据与展示经常会不符，例如 form 的交互是日期范围组件，服务端传的值是 startDate，endDate 两个字段。此时使用 bind 字段

  1. /**
  2.  * transform: true
  3.  * defaultShowCode: true
  4.  */
  5. import React from 'react';
  6. import { Button, message, Space } from 'antd';
  7. import FormRender, { useForm } from 'form-render';
  8. import { fakeApi } from './utils';
  10. const schema = {
  11.   type: 'object',
  12.   properties: {
  13.     dateRange: {
  14.       bind: ['startDate', 'endDate'],
  15.       title: '日期范围',
  16.       type: 'range',
  17.       format: 'date',
  18.     },
  19.   },
  20. };
  22. const Demo = () => {
  23.   const form = useForm();
  25.   const onFinish = (data, errors) => {
  26.     if (errors.length > 0) {
  27.       message.error(
  28.         '校验未通过：' + JSON.stringify(errors.map(item => item.name))
  29.       );
  30.     } else {
  31.       fakeApi('xxx/submit', data).then(_ => message.success('提交成功！'));
  32.     }
  33.   };
  35.   const getRemoteData = () => {
  36.     fakeApi('xxx/getForm').then(_ => {
  37.       form.setValues({ startDate: '2020-04-04', endDate: '2020-04-24' });
  38.     });
  39.   };
  41.   return (
  42.     <div style={{ width: '400px' }}>
  43.       <FormRender form={form} schema={schema} onFinish={onFinish} />
  44.       <Space>
  45.         <Button onClick={getRemoteData}>加载服务端数据</Button>
  46.         <Button type="primary" onClick={form.submit}>
  47.           提交（见console）
  48.         </Button>
  49.       </Space>
  50.     </div>
  51.   );
  52. };
  54. export default Demo;

例 4：服务端加载选择框的选项

服务端获取数据后展示下拉选项的选项值，我们提供了 form.setSchemaByPath 方法

  1. /**
  2.  * transform: true
  3.  * defaultShowCode: true
  4.  */
  5. import React, { useEffect } from 'react';
  6. import { Button, message } from 'antd';
  7. import FormRender, { useForm } from 'form-render';
  8. import { fakeApi } from './utils';
  10. const schema = {
  11.   type: 'object',
  12.   properties: {
  13.     input1: {
  14.       title: '简单输入框',
  15.       type: 'string',
  16.       required: true,
  17.     },
  18.     obj1: {
  19.       title: '对象',
  20.       description: '这是一个对象类型',
  21.       type: 'object',
  22.       properties: {
  23.         select1: {
  24.           title: '单选',
  25.           type: 'string',
  26.           widget: 'select',
  27.         },
  28.       },
  29.     },
  30.   },
  31. };
  33. const Demo = () => {
  34.   const form = useForm();
  36.   const onMount = () => {
  37.     form.setSchemaByPath('obj1.select1', {
  38.       enum: ['east', 'south', 'west', 'north'],
  39.       enumNames: ['东', '南', '西', '北'],
  40.     });
  41.   };
  43.   const onFinish = (data, errors) => {
  44.     if (errors.length > 0) {
  45.       message.error(
  46.         '校验未通过：' + JSON.stringify(errors.map(item => item.name))
  47.       );
  48.     } else {
  49.       message.info(JSON.stringify(data));
  50.     }
  51.   };
  53.   return (
  54.     <div style={{ width: '400px' }}>
  55.       <FormRender
  56.         form={form}
  57.         schema={schema}
  58.         onMount={onMount}
  59.         onFinish={onFinish}
  60.       />
  61.       <Button type="primary" onClick={form.submit}>
  62.         提交（见console）
  63.       </Button>
  64.     </div>
  65.   );
  66. };
  68. export default Demo;