展示隐藏

对于表单而言，我们经常会通过某些表单项的操作，触发另一些表单项的显隐。

Drip Form 为每个表单项内置了vcontrol字段，用于表单项之间产生UI 显隐的控制关联。

vcontrol支持两种类型，函数或函数函数体

函数

如果unitedSchema不需要json形式，则可以使用函数形式

代码示例

• unitedSchema.ts
• App.tsx

// 表单配置文件

export default {
  type: 'object',
  showError: 'change',
  ui: {},
  theme: 'antd',
  schema: [
    {
      title: '开关',
      type: 'string',
      default: true,
      ui: {
        type: 'switch',
      },
      fieldKey: 'switchItem',
    },
    {
      type: 'number',
      title: '数字输入框',
      ui: {
        type: 'number',
        description: {
          type: 'text',
          title: '组件是否展示取决于开关是否开启',
        },
        vcontrol: ({ formData }: any) => {
          //返回true，则表单展示；返回false，表单不展示
          return formData.switchItem;
        },
      },
      fieldKey: 'number_lAjBzU',
    },
  ],
};

代码沙盒：

vcontrol函数接收一个如下的对象参数

{
  //所有表单数据
  formData,
  //所有表单的ui配置
  uiSchema,
  //所有表单的校验配置
  dataSchema,
  //get Api
  get,
  //getKey Api
  getKey,
  //当前表单fieldKey
  fieldKey,
  //当前表单值
  fieldData,
}

函数体

如果unitedSchema需要json形式，则使用函数体形式。内部会将vcontorl使用new Function构造成函数。

代码示例

• unitedSchema.json
• App.tsx

{
  "type": "object",
  "showError": "change",
  "ui": {},
  "theme": "antd",
  "schema": [
    {
      "title": "开关",
      "type": "string",
      "default": true,
      "ui": {
        "type": "switch"
      },
      "fieldKey": "switchItem"
    },
    {
      "type": "number",
      "title": "数字输入框",
      "ui": {
        "type": "number",
        "description": {
          "type": "text",
          "title": "组件是否展示取决于开关是否开启"
        },
        //该语句在执行之后会返回一个 Boolean 值，用来触发被控制字段的显隐。返回 true则展示 ，否则隐藏该项。
        "vcontrol": "return props.formData.switchItem"
      },
      "fieldKey": "number_lAjBzU"
    }
  ]
}

代码沙盒：

函数占位符

如果需要使用函数体形式配置需要复杂的显隐处理，可以使用函数占位符处理。

vcontrol基于new Function实现，因此在书写的函数体内，我们可以使用props获取如下参数：

props可以获取到的值

{
  //所有表单数据
  formData,
  //所有表单的ui配置
  uiSchema,
  //所有表单的校验配置
  dataSchema,
  //get Api
  get,
  //getKey Api
  getKey,
  //当前表单fieldKey
  fieldKey,
  //当前表单值
  fieldData,
}