dependencies依赖的字段发生变化,触发当前字段的onChange事件
时间: 2024-03-06 13:47:01 浏览: 109
在 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 可以更加灵活地控制表单项的子组件。
阅读全文