一对N联动

一个表单数据变化，触发多个表单联动

control 或者 ui.change（推荐使用）

也可以通过control prop或ui.change配合 changeKey 判断当前变化的表单。

由于 control prop 和 ui.change 类似，所以这里以 control prop 为例

App.tsx

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 }}
      control={({ changeKey, get, set }) => {
        // 只有变化的表单是数字输入框1或数字输入框2
        if (changeKey === 'xxx') {
          //联动逻辑
        }
      }}
    ></DripForm>
  )
}

export default App

代码示例

• 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 }}
      control={({ changeKey, get, set, merge }) => {
        // 只有变化的表单是开关时
        if (changeKey === 'switch_X2Y7KI') {
          //开关是否开启
          const val = get(changeKey).data;
          //使用set Api设置输入框是否禁用
          set('text_T4KrN2', 'uiSchema', (textUiSchema: any) => {
            textUiSchema.disabled = val;
          });
          //使用merge Api设置多选框是否禁用
          merge('checkbox_kXIPcF', 'uiSchema', {
            disabled: val,
          });
        }
      }}
    ></DripForm>
  );
}

export default App;

代码沙盒：

unitedSchema 中的 ui.onChange（不推荐使用）

不推荐使用此方式

使用 ui.onChange 设置 ui 配置时，需要使用dispatch配合getKey Api。

每个表单都可以配置一个onChange，用来监听当前表单数据变化。

unitedSchema

// 表单配置文件

export default {
  type: 'object',
  showError: 'change',
  ui: {},
  theme: 'antd',
  schema: [
    {
      type: 'boolean',
      title: '开关',
      ui: {
        type: 'switch',
        theme: 'antd',
        onChange:({})=>{
          //开关变化，触发的联动逻辑
        }
      },
      fieldKey: 'switch_X2Y7KI',
    },
    ...
  ],
};

onChange接收一个函数或函数体（类似vcontrol的实现方式）

提示

unitedSchema 非 json 格式，推荐使用函数形式，方便编写和调试；

unitedSchema 是 json 格式，推荐使用函数体形式；

两种形式，都可以获得以下参数，函数直接获取；函数体通过 props.xxx获取

onChange参数

{
  //当前表单的值
  val,
  //dispatch Api
  dispatch,
  //当前表单的fieldKey
  fieldKey,
  //getKey Api
  getKey,
}

注意

为了性能，onChange 没有下发get、set、merge Api。只下发了dispatch

代码示例

• 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

代码沙盒：