数据联动

Form 中的数据联动非常常见，所以我们封装了一个组件来进行数据处理。

ProFormDependency

ProFormDependency 是一个简化版本的 Form.Item，它默认内置了 noStyle 与 shouldUpdate，我们只需要配置 name 来确定我们依赖哪个数据，ProFormDependency 会自动处理 diff 和并且从表单中提取相应的值。

name 参数必须要是一个数组，如果是嵌套的结构可以这样配置 name={['name', ['name2', 'text']]}。配置的 name 的值会在 renderProps 中传入。name={['name', ['name2', 'text']]} 传入的 values 的值为 { name: string,name2: { text:string } }。

<ProFormDependency name={['name']}>
  {({ name }) => {
    return (
      <ProFormSelect
        options={[
          {
            value: 'chapter',
            label: '盖章后生效',
          },
        ]}
        width="md"
        name="useMode"
        label={`与《${name}》合同约定生效方式`}
      />
    );
  }}
</ProFormDependency>

代码示例

互相依赖表单

获取表单依赖值

下面例子演示了不同情形下的依赖取值顺序：

<ProFormDependency>不在<ProFormList>中：根据name声明的依赖项，从全局取值（情形 1）
<ProFormDependency>在<ProFormList>中
- <ProFormDependency>的ignoreFormListField为true：根据name声明的依赖项，从全局取值（情形 2）
- <ProFormDependency>的ignoreFormListField为false：根据name声明的依赖项，从局部取值（情形 3）

c.a

c.b

c.c.a

c.d

搜集依赖值（情形3） <ProFormDependency name={["a","b",["c","a"]]}>

{
  "c": {
    "d": [
      {
        "c": {}
      }
    ]
  },
  "a": 6,
  "b": 7
}

a, b, c.a取自局部

c.e

搜集依赖值（情形2) <ProFormDependency name={["a","b",["c","a"]]} ignoreFormListField>

{"a":1,"b":2,"c":{"a":3}}

a, b, c.a取自全局

收集依赖值（情形1) <ProFormDependency name={["a","b",["c","a"],["c","b"],["c","c","a"],["c","d"],["c","e"]]}>

{"a":1,"b":2,"c":{"a":3,"b":4,"c":{"a":5},"d":[{"a":6,"b":7}],"e":[{"a":8,"b":9}]}}

获取表单依赖值

ProComponents

数据联动

ProFormDependency

代码示例

互相依赖表单

获取表单依赖值