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

toc: content

表单健康度 & 提效

业界有句话叫 “You can’t improve what you can’t measure”。即是说，如果无法度量一件事，那改善也无从谈起。 FormRender 作为表单提效的方案，提效的同时也需要给出合理的度量数据，帮助使用者更好地认知和发现问题。

目前 FormRender 提供了两个触发时机以及一系列相关数据作为对外开放接口，推荐用户用于接入适合自己项目的埋点 & 数据监控方案。

使用

提供了 logOnMount 和 logOnSubmit 两个钩子。在使用 useForm 时注入：

  1. const form = useForm({
  2.   logOnMount: info => {
  3.     console.log('onMount', info);
  4.   },
  5.   logOnSubmit: info => {
  6.     console.log('onSubmit', info);
  7.   },
  8. });

最简使用样例如下，效果见 console

  1. /**
  2.  * transform: true
  3.  * defaultShowCode: true
  4.  */
  5. import React, { useEffect } from 'react';
  6. import { Button, Space, message } from 'antd';
  7. import FormRender, { useForm } from 'form-render';
  9. const Demo = () => {
  10.   const form = useForm({
  11.     logOnMount: info => {
  12.       console.log('onMount', info);
  13.     },
  14.     logOnSubmit: info => {
  15.       console.log('onSubmit', info);
  16.     },
  17.   });
  19.   const schema = {
  20.     type: 'object',
  21.     properties: {
  22.       input1: {
  23.         title: '输入框',
  24.         required: true,
  25.         type: 'string',
  26.       },
  27.       select1: {
  28.         title: '单选',
  29.         type: 'string',
  30.         enum: ['a', 'b', 'c'],
  31.         enumNames: ['左', '中', '右'],
  32.         widget: 'radio',
  33.       },
  34.     },
  35.   };
  37.   const onFinish = (data, errors) => {
  38.     if (errors.length > 0) {
  39.       message.error(
  40.         '校验未通过：' + JSON.stringify(errors.map(item => item.name))
  41.       );
  42.     } else {
  43.       message.success('提交成功！');
  44.     }
  45.   };
  47.   return (
  48.     <div>
  49.       <FormRender
  50.         id="my-demo-form"
  51.         form={form}
  52.         schema={schema}
  53.         onFinish={onFinish}
  54.       />
  55.       <Button type="primary" onClick={form.submit}>
  56.         提交（见console）
  57.       </Button>
  58.     </div>
  59.   );
  60. };
  62. export default Demo;

logOnMount

会在表单首次加载时触发，一般也就是页面首次加载时。样例的入参值如下

参数 描述
id 表单 id，只当用户注明 id 时才会 log
formData 表单值
schema 表单协议
url 表单加载的页面地址
formMount 表单加载的时间点 
  1. {
  2.   id: "my-demo-form",
  3.   schema: "{type: 'object',properties: {input1: {title: '输入框',required: true,type: 'string'},select1:{title: '单选',... }",
  4.   url: 'https://xrender.fun/form-render/measure',
  5.   formData: '{}',
  6.   formMount: '2021-07-02 16:03:42',
  7. };

logOnSubmit

会在表单每次提交时触发。样例的入参值如下

参数 描述
duration 表单填写时长
ms duration 的时间戳形式
numberOfSubmits 从首次加载开始提交了几次
failedAttempts 从首次加载开始提交失败了几次
errors 提交失败的校验信息 
  1. {
  2.   id: "my-demo-form", // 如果注明表单id，会在此处展示
  3.   formMount: '2021-07-02 16:27:28', // 表单首次加载的时间点
  4.   ms: 35598, // duration的时间戳形式
  5.   duration: '00:00:35', // 从表单加载/上次提交完成开始计时，到本次提交使用的时间
  6.   numberOfSubmits: 1, // 提交的次数（失败与否）
  7.   failedAttempts: 0, // 提交失败的次数（即有校验未通过）
  8.   url: 'https://xrender.fun/form-render/measure', // 表单对应页面的url
  9.   formData: "{input1: '3123',select1: 'c'}",
  10.   schema: "{ ... }", // 表单协议
  11.   errors: "[]", // 校验未通过时，展示报错校验信息
  12. };