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

toc: false

生命周期 (加载 - 提交)

对于表单最重要的两个操作时机是“加载”和“提交”

onMount （加载）

  1. 由于 React 组件的 componentDidMount(或者 useEffect) 很多时候并不能准确监听到“表单加载完成”这个时间点，所以 FormRender 提供了 props onMount，在表单首次加载时执行。 表单首次加载的定义是：当非空的 schema 首次传入 FormRender 完成表单渲染之后。其中 undefined、null、{} 都视为“空”的 schema。
  2. onMount 常用于加载初始数据，或是根据服务端接口获取数据进一步补充 schema（例如下拉选框的选项）
  3. 如果 schema 来自服务端接口，注意不要使用onMount来加载 schema，而使用componentDidMount，因为onMount的触发机制是判断非空 schema 已经传入 FormRender
  1. /**
  2.  * transform: true
  3.  * defaultShowCode: true
  4.  */
  5. import React, { useEffect } from 'react';
  6. import { Button } from 'antd';
  7. import FormRender, { useForm } from 'form-render';
  9. const delay = ms => new Promise(res => setTimeout(res, ms));
  11. const schema = {
  12.   type: 'object',
  13.   properties: {
  14.     input1: {
  15.       title: '简单输入框',
  16.       type: 'string',
  17.       required: true,
  18.     },
  19.     select1: {
  20.       title: '选择框',
  21.       description: '加载中...',
  22.       type: 'string',
  23.       enum: [],
  24.       widget: 'radio',
  25.     },
  26.   },
  27. };
  29. const Demo = () => {
  30.   const form = useForm();
  32.   const onMount = () => {
  33.     form.setValues({ input1: 'hello world' });
  35.     delay(3000).then(_ => {
  36.       form.setSchemaByPath('select1', {
  37.         description: '',
  38.         enum: ['a', 'b', 'c'],
  39.         enumNames: ['早', '中', '晚'],
  40.       });
  41.     });
  42.   };
  44.   return <FormRender form={form} schema={schema} onMount={onMount} />;
  45. };
  47. export default Demo;

beforeFinish / onFinish （提交）

表单提交的流程：

  1. 用户调用 form.submit 提交开始
  2. 本地校验开始，如果未通过，展示校验错误
  3. 本地校验结束，beforeFinish 开始执行，一般用于回填远端校验，如果未通过展示校验错误
  4. 校验结束，onFinish 开始执行，表单数据和校验信息以入参形式回传给用户

beforeFinish 和 onFinish 的使用详见 表单方法