MUI Form Hook

完整文档（FULL DOC）

• 基于MUI组件库上层封装，为了使MUI更易用，更符合国内使用习惯
• MUI相关基础库都未打包，所以使用mui-form-hook时，同时需要下载MUI基础包

PeerDependencies

请确保您的代码仓库中已经存在以下依赖

1"peerDependencies": {
2  "@types/react": "^17.0.0 || ^18.0.0",
3  "react": "^17.0.0 || ^18.0.0",
4  "react-dom": "^17.0.0 || ^18.0.0",
5  "react-hook-form": "^7.30.0",
6  "@mui/icons-material": "^5.4.2",
7  "@mui/material": "^5.4.2",
8  "@mui/lab": "^5.0.0-alpha.83",
9  "@mui/x-data-grid": "^5.8.0"
10},

Useage 使用

• Download 下载

1# 分开下载
2  yarn add mui-form-hook 
3  yarn add @types/react@18.2.0
4  yarn add react-dom@18.2.0
5  yarn add react-hook-form@7.30.0
6  yarn add @mui/icons-material@5.4.2
7  yarn add @mui/material@5.4.2
8  yarn add @mui/lab@5.0.0-alpha.83
9  yarn add @mui/x-data-grid@5.8.0

10
11# 一次下载
12yarn add mui-form-hook  @types/react@18.2.0 react-dom@18.2.0 react-hook-form@7.30.0 @mui/icons-material@5.4.2 @mui/material@5.4.2 @mui/lab@5.0.0-alpha.83 @mui/x-data-grid@5.8.0

• Example 示例

1import React from 'react'
2import { Button } from '@mui/material'
3import { useFormComponent } from 'mui-form-hook'
4
5
6/** 类型声明 */
7export interface NChangeWardBedInput {
8  wardBedId?: string | undefined
9  changeTime?: Date
10  iHid?: string | undefined
11}
12
13/** 获取默认表单值 */
14export const getDefaultFormData = () =>
15  ({
16    /** 转入床位Id */
17    wardBedId: '',
18    /** 换床时间 */
19    changeTime: new Date(),
20    /** 住院信息id */
21    iHid: ''
22  } as NChangeWardBedInput)
23
24export const Test = () => {
25  // 创建表单及其相关组件和api(和 useForm入参相同)
26  const { FormText, handleSubmit } = useFormComponent<NChangeWardBedInput>({
27    // 设置默认值
28    defaultValues: getDefaultFormData()
29  })
30  return (
31    <div>
32      <FormText
33        name="iHid" // 绑定表单属性
34        variant="outlined" // TextField 样式继承
35        rules={{ required: '请输入' }} // 定义验证规则
36      />
37      <FormText
38        name="wardBedId"
39        variant="outlined"
40        rules={{ required: '请输入' }}
41      />
42      <Button
43        // 在这里提交表单 handleSubmit和react-form-hook保持一致
44        // 事实上 useFormComponent完全继承了useForm的api
45        onClick={handleSubmit((data) => console.log(data))}
46      >
47        提交
48      </Button>
49    </div>
50  )
51}

API 接口参数介绍

详细介绍了库提供的相关组件和 hook

HOOK

useFormComponent 主 hook

withControllerFields 注入 Controller 工具

BaseComponent 基础组件

• BaseComponent 都需要实现以下通用属性，这是表单组件需要的通用实现：

1/** Form表单组件入参基本参数
2 * @param TValue 组件绑定的数据类型
3 */
4export type IFormComponentPropsBase<TValue = any, TItem = null> = {
5  /** 错误状态 */
6  error?: boolean;
7  /** 组件下提示文本 */
8  helperText?: string | JSX.Element;
9  /** 组件内提示 */
10  label?: string | JSX.Element;
11  /** 表单值 */
12  value?: TValue;
13  /** 更新值 */
14  onChange?: IChange<TValue>;
15  /** 用于Select同时绑定多个Form属性
16   * @description 如果需要使用otherNames属性绑定多个属性, 请实现该方法
17   */
18  onItemChange?: IChange<TItem>;
19};

FormComponent 表单组件

• 表单组件由 useFormComponent 方法 方法返回；
• 表单组件继承自基础组件(BaseComponent)，所以拥有对应的 BaseComponent 的相关所有属性；
• 表单组件继承 react-hook-form 的Controller，所以拥有 Controller 组件的所有属性;

1{
2    name: TName;
3    rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
4    shouldUnregister?: boolean;
5    defaultValue?: UnpackNestedValue<FieldPathValue<TFieldValues, TName>>;
6    control?: Control<TFieldValues>;
7}

• 表单组件其他附加属性

1{
2    /** 默认错误提示 */
3    defaultErrorMessage?: string | JSX.Element
4    /** 同时绑定多个Form属性
5      * @description 如果需要使用otherNames属性绑定多个属性, 请在原始组件中实现onItemChange方法
6      */
7    otherNames?: {[itemProperty]:formName}
8  }

• 表单组件内部已经托管属性: error,helperText,value,onChange,control；这些属性无须重新赋值，但开发者显示赋值将覆盖托管值

Develop 开发

准备工作

• 在需要开发的库下执行

  1# 这使得更新会实时同步上层引用模块
  2pnpm dev

• 这使得组件库mui-form-hook的更新会实时同步到工作空间的其他仓库，而无需build打包。
• 发布前需要将将 package.prod.json 内容复制到 package.json

开始

@mui-form/hook 提供了开发的方法让开发者可以进行二次开发，便于丰富 Form 的组件。

• 其他表单组件如果需集成的 useFormComponent 中，需要实现 useFormComponent 规定的参数，具体参数属性如下：

  1/** Form表单组件入参基本参数
  2 * @param TValue 组件绑定的数据类型
  3 */
  4export type IFormComponentPropsBase<TValue = any, TItem = null> = {
  5  /** 错误状态 */
  6  error?: boolean;
  7  /** 组件下提示文本 */
  8  helperText?: string | JSX.Element;
  9  /** 组件内提示 */
  10  label?: string | JSX.Element;
  11  /** 表单值 */
  12  value?: TValue;
  13  /** 更新值 */
  14  onChange?: IChange<TValue>;
  15  /** 用于Select同时绑定多个Form属性
  16   * @description 如果需要使用otherNames属性绑定多个属性, 请实现该方法
  17   */
  18  onItemChange?: IChange<TItem>;
  19};

• 开发流程

1. 定义组件参数 建议用类型 IFormComponentProps处理组件入参，它规定了上述规范的参数，同时继承用户自定义的参数。

   1// IFormComponentProps需要三个泛型参数
   2// <TProps> 自定义组件参数
   3// <TV> value的类型
   4// <TI> item的类型 (下拉选择框等的单项数据类型)
   5export type IMyNewComponetProps<TV = any, TI = any> = IFormComponentProps<
   6  MuiComponetProps,
   7  TV,
   8  TI
   9>;

2. 实现组件

   1const MyNewComponet = ({...props}:IMyNewComponetProps)=>{
   2  // ... 具体的实现内容
   3  return (
   4    <MuiComponet
   5      {...props}
   6    >)
   7}

3. 把组件附加到 useFormComponent 中,使用withControllerFields

   1const { formProps } = useFormComponent({
   2  defaultValues: getDefaultFormDat(),
   3});
   4const FormComponent = withControllerFields(MyNewComponet, { formProps });