antd 4.10.3 Form dependencies如何与render props结合使用，当依赖的值发生变化时，触发当前字段自动更新； 不使用hook

在 antd 4.10.3 中，Form dependencies 可以与 render props 结合使用，实现依赖值变化时自动更新当前字段的功能。具体实现步骤如下：

1. 首先，在 Form.Item 中定义 dependencies 属性，指定当前字段所依赖的值，如下所示：

<Form.Item
  name="username"
  label="用户名"
  dependencies={['password']}
>
  {({ getFieldProps }) => (
    <Input {...getFieldProps('username')} />
  )}
</Form.Item>

2. 在 render props 中使用 getFieldProps 获取当前表单项的属性，这里是 username 字段的属性。当依赖的值发生变化时，getFieldProps 会返回一个新的属性对象。

3. 当 dependencies 中所依赖的值发生变化时，Form.Item 会自动重新渲染子组件。这时，getFieldProps 会返回一个新的属性对象，自动更新当前字段。

总的来说，antd 4.10.3 中的 Form dependencies 可以方便地实现表单字段之间的依赖关系，同时与 render props 结合使用，可以更加灵活地控制表单项的属性。

相关问题

dependencies依赖的字段发生变化，触发当前字段的onChange事件

在 antd 4.10.3 中，可以通过使用 getFieldDecorator 方法，结合 dependencies 属性和 render props，实现依赖字段发生变化时，触发当前字段的 onChange 事件。具体实现步骤如下：

1. 在 Form.Item 中使用 getFieldDecorator 方法，创建当前表单项的装饰器。同时，设置 dependencies 属性，指定当前字段所依赖的字段，如下所示：

<Form.Item
  label="密码"
  dependencies={['username']}
>
  {getFieldDecorator('password', {
    rules: [{ required: true, message: '请输入密码' }],
  })(
    <Input.Password onChange={handlePasswordChange} />
  )}
</Form.Item>

2. 在 getFieldDecorator 的第二个参数中，设置 rules 规则和初始值等属性。同时，在 render props 中返回当前表单项的子组件，这里是一个 Input.Password 组件。

3. 在子组件中设置 onChange 事件处理函数，比如 handlePasswordChange。当依赖的字段发生变化时，Form.Item 会自动重新渲染子组件，同时返回一个新的 getFieldDecorator 装饰器。这时，handlePasswordChange 事件处理函数会被重新绑定到新的 Input.Password 组件上，从而实现依赖字段发生变化时，触发当前字段的 onChange 事件。

总的来说，使用 getFieldDecorator 方法和 dependencies 属性，可以方便地实现依赖字段发生变化时，触发当前字段的 onChange 事件。同时，render props 可以更加灵活地控制表单项的子组件。

antd form dependencies 自动触发更新实例

如果您使用的是 Ant Design 的 Form 组件，您可以通过设置 getFieldDecorator 的第三个参数 options 来实现表单项之间的依赖关系。具体来说，options 中的 rules 属性可以接收一个数组，用于定义该表单项依赖的其他表单项的值，只要这些值发生变化，该表单项就会自动更新。例如：

<Form.Item label="A">
  {getFieldDecorator("a", {
    rules: [
      {
        validator: (rule, value, callback) => {
          if (value === getFieldValue("b")) {
            callback("A 和 B 的值不能相同");
          } else {
            callback();
          }
        },
      },
    ],
  })(<Input />)}
</Form.Item>
<Form.Item label="B">
  {getFieldDecorator("b")(<Input />)}
</Form.Item>

在上面的例子中，表单项 A 的规则中定义了一个 validator，用于检查 A 的值是否等于 B 的值，如果相等就会提示错误信息。这里的关键是在 validator 中使用了 getFieldValue 函数来获取表单项 B 的值，从而实现了 A 和 B 的依赖关系。当表单项 B 的值发生变化时，表单项 A 会自动更新，重新执行 validator，并根据新的 B 值来更新自己的状态。