在Ant Design的Form组件中，之前我们常常会向子组件传递form对象来进行表单操作。但是从Ant Design 4.0开始，推荐使用useFormInstance来获取当前表单实例，这样可以避免不必要的性能开销。
使用FormProvider可以让多个Form之间协同操作，比如在一个父组件中管理多个子组件的表单状态。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import { Form, FormProvider, useForm } from 'antd';
import ChildComponent1 from './ChildComponent1';
import ChildComponent2 from './ChildComponent2';
export default function ParentComponent() {
const [form1] = useForm();
const [form2] = useForm();
return (
<FormProvider forms={{ form1, form2 }}>
<ChildComponent1 />
<ChildComponent2 />
</FormProvider>
);
}
|
动态表单
使用state变量或者shouldUpdate函数来控制Form组件的显示和隐藏。两者有何区别？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| {
state && (
<Form>
{/* 表单内容 */}
</Form>
)
}
const shouldUpdate = (prevValues, currentValues) => {
return prevValues.someField !== currentValues.someField;
};
<Form shouldUpdate={shouldUpdate}>
{/* 表单内容 */}
</Form>
|
三种布局方式
Ant Design的Form组件提供了三种布局方式：水平布局、垂直布局和行内布局。
label和组件的位置
大部分情况label在前，组件在后，比较特殊的是Radio和checkbox组件，它们的label在后面。把标签写在label中时，label会在组件的前面。对应下面username和password的输入框。把标签写在组件中时，label会在组件的后面。对应下面的remember和agreement复选框。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <Form.Item label="用户名" name="username">
<Input />
</Form.Item>
<Form.Item label="密码" name="password">
<Input.Password />
</Form.Item>
<Form.Item name="remember" valuePropName="checked">
<Checkbox>记住我</Checkbox>
</Form.Item>
<Form.Item name="agreement" valuePropName="checked">
<Radio>我已阅读并同意<a href="#">用户协议</a></Radio>
</Form.Item>
|
在Ant Design的Form.Item中，label和组件的宽度可以通过labelCol和wrapperCol属性来控制。。
1
2
3
4
5
6
7
8
| <Form.Item
label="用户名"
name="username"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
>
<Input />
</Form.Item>
|