antd 4.0版本 Form dependencies 自动触发更新实例
时间: 2024-03-05 13:52:02 浏览: 24
在 Ant Design 4.0 版本中,Form 组件的 getFieldDecorator API 已经被废弃,取而代之的是 useForm Hook,它提供了一种新的方式来实现表单项之间的依赖关系。
具体来说,您可以在 useForm Hook 中使用 watch 函数来监听表单项的值,并在表单项值发生变化时触发相应的回调函数。例如:
```jsx
import React from "react";
import { useForm } from "antd/lib/form/Form";
import { Input } from "antd";
function App() {
const [form] = useForm();
const handleAChange = (value) => {
if (value === form.getFieldValue("b")) {
form.setFields([
{
name: "a",
errors: ["A 和 B 的值不能相同"],
},
]);
} else {
form.setFieldsValue({ a: value });
form.setFields([
{
name: "a",
errors: [],
},
]);
}
};
const handleBChange = (value) => {
if (value === form.getFieldValue("a")) {
form.setFields([
{
name: "b",
errors: ["A 和 B 的值不能相同"],
},
]);
} else {
form.setFieldsValue({ b: value });
form.setFields([
{
name: "b",
errors: [],
},
]);
}
};
const watchA = form.watch("a");
const watchB = form.watch("b");
React.useEffect(() => {
if (watchA !== undefined && watchB !== undefined) {
if (watchA === watchB) {
handleAChange(watchA);
}
}
}, [watchA, watchB]);
React.useEffect(() => {
if (watchA !== undefined && watchB !== undefined) {
if (watchA === watchB) {
handleBChange(watchB);
}
}
}, [watchA, watchB]);
return (
<form>
<Input name="a" onChange={(e) => form.setFieldsValue({ a: e.target.value })} />
<Input name="b" onChange={(e) => form.setFieldsValue({ b: e.target.value })} />
</form>
);
}
```
在上面的例子中,我们使用了 useForm Hook 来创建一个表单实例,并分别定义了 handleAChange 和 handleBChange 两个回调函数,用于处理表单项 A 和 B 的值变化。然后,我们使用 watch 函数来监听 A 和 B 的值,并在值发生变化时触发相应的回调函数。在回调函数中,我们使用 setFieldsValue 函数来更新表单项的值,并使用 setFields 函数来更新表单项的错误信息。最后,我们在 useEffect Hook 中监听 watchA 和 watchB 的变化,并调用相应的回调函数来处理依赖关系。
需要注意的是,由于 watch 函数只能监听具有 name 属性的表单项,因此我们需要在 Input 组件中添加 name 属性来使其能够被 watch 函数监听。此外,由于 useForm Hook 返回的表单实例是一个 ref 对象,因此我们需要使用 form.getFieldValue 和 form.setFieldsValue 函数来获取和更新表单项的值。