默认值的处理

Drip Form 如何设置表单数据的默认值？有以下两种方法

1. 通过formData prop设置
2. 通过 unitedSchema 的 default 关键字设置

本章节主要介绍第二种方式

default 关键字设置默认值

原理

ajv 会在校验时，将 unitedSchema 的 default 关键字自动生成相应的数据结构

number、string、boolean 类型设置默认值

代码示例

在 unitedSchema 中配置 default 关键字来设置表单初始值。

• App.tsx
• unitedSchema.ts

import DripForm from '@jdfed/drip-form'
import antd from '@jdfed/drip-form-theme-antd'
import unitedSchema from './unitedSchema'
import '@jdfed/drip-form/dist/index.css'
import '@jdfed/drip-form-theme-antd/dist/index.css'
import 'antd/dist/antd.css'

function App() {
  return (
    <DripForm
      // 表单配置文件
      unitedSchema={unitedSchema}
      // 导入组件
      uiComponents={{ antd }}
    ></DripForm>
  )
}

export default App

代码沙盒：

数组、对象设置默认值

给数组的子项、对象的子属性设置默认值时，需要同时给数组或对象本身设置默认值。

为什么给数组子项、对象中子属性设置默认值时，需要对对象或数组本身设置默认值?

参考Ajv issue

代码示例

在 unitedSchema 中配置 default 关键字来设置表单初始值。

• App.tsx
• unitedSchema.ts

import DripForm from '@jdfed/drip-form'
import antd from '@jdfed/drip-form-theme-antd'
import unitedSchema from './unitedSchema'
import '@jdfed/drip-form/dist/index.css'
import '@jdfed/drip-form-theme-antd/dist/index.css'
import 'antd/dist/antd.css'

function App() {
  return (
    <DripForm
      // 表单配置文件
      unitedSchema={unitedSchema}
      // 导入组件
      uiComponents={{ antd }}
    ></DripForm>
  )
}

export default App

代码沙盒：