3步搞定Ant Design表单联动：从级联选择到动态表单项
项目地址: https://gitcode.com/gh_mirrors/antde/ant-design 你是否还在为表单中省份-城市的级联选择烦恼？是否遇到过需要动态添加商品明细的场景？本文将通过实际案例，教你用Ant Design的Form组件轻松实现这些功能，让表单交互更流畅，用户体验更出色。读完本文，你将掌握级联选择、动态表单项添加/删除、表单依赖校验等实用技巧。
级联选择：让选项联动更智能
级联选择是表单中常见的交互场景，比如选择省份后自动加载对应城市。Ant Design的Form组件结合Cascader或Select组件，可以轻松实现这一功能。
基础级联实现
使用Form.Item的dependencies属性，可以让当前字段依赖其他字段的值变化。以下是一个省份-城市级联选择的示例：
<Form.Item name="province" label="省份">
<Select onChange={handleProvinceChange}>
{provinceOptions.map(province => (
<Select.Option key={province.code} value={province.code}>
{province.name}
</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
name="city"
label="城市"
dependencies={['province']}
rules={[{ required: true, message: '请选择城市' }]}
>
<Select>
{cityOptions.map(city => (
<Select.Option key={city.code} value={city.code}>
{city.name}
</Select.Option>
))}
</Select>
</Form.Item>
当省份字段的值发生变化时，城市字段会自动重新渲染，你可以在onChange事件中加载对应城市的数据。
使用useWatch优化级联体验
Ant Design 5.12.0版本引入了Form.useWatch钩子，让监听字段变化变得更简单。相比传统的dependencies，useWatch可以直接获取字段值，方便进行更复杂的逻辑处理：
const [form] = Form.useForm();
const province = Form.useWatch('province', form);
// 监听省份变化，加载对应城市数据
useEffect(() => {
if (province) {
fetchCities(province).then(data => {
setCityOptions(data);
});
}
}, [province]);
这种方式不仅代码更简洁，还能避免不必要的渲染，提升表单性能。更多关于useWatch的使用细节，可以参考官方文档：components/form/index.zh-CN.md。
动态表单项：灵活应对多变需求
在实际业务中，经常会遇到需要动态添加/删除表单项的场景，比如添加多个联系人、输入多个商品明细等。Ant Design的Form.List组件专为这种场景设计，让动态表单管理变得简单。
动态添加/删除表单项
以下是一个动态添加乘客信息的示例，使用Form.List实现表单项的动态管理：
<Form.List name="passengers">
{(fields, { add, remove }, { errors }) => (
<>
{fields.map((field, index) => (
<Form.Item
key={field.key}
label={index === 0 ? '乘客信息' : ''}
required={false}
>
<Form.Item
{...field}
name={[field.name, 'name']}
rules={[{ required: true, message: '请输入乘客姓名' }]}
noStyle
>
<Input placeholder="乘客姓名" style={{ width: '60%' }} />
</Form.Item>
{fields.length > 1 && (
<MinusCircleOutlined onClick={() => remove(field.name)} />
)}
</Form.Item>
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} icon={<PlusOutlined />}>
添加乘客
</Button>
<Form.ErrorList errors={errors} />
</Form.Item>
</>
)}
</Form.List>
这个例子中，我们使用Form.List包裹动态表单项，通过add和remove方法实现表单项的添加和删除。每个表单项都有独立的校验规则，确保用户输入的合法性。完整的示例代码可以查看：components/form/demo/dynamic-form-item.tsx。
复杂动态表单：嵌套结构与校验
对于更复杂的动态表单，比如每行包含多个字段，或者需要嵌套结构，Form.List同样可以胜任。你可以在每个动态项中嵌套多个Form.Item，实现复杂的数据结构：
<Form.List name="products">
{(fields, { add, remove }) => (
<>
{fields.map((field) => (
<Form.Item key={field.key} label="商品">
<Form.Item
{...field}
name={[field.name, 'name']}
rules={[{ required: true, message: '请输入商品名称' }]}
noStyle
>
<Input placeholder="商品名称" style={{ width: '30%', marginRight: 8 }} />
</Form.Item>
<Form.Item
{...field}
name={[field.name, 'price']}
rules={[{ required: true, message: '请输入价格' }]}
noStyle
>
<InputNumber placeholder="价格" style={{ width: '30%' }} />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(field.name)} />
</Form.Item>
))}
<Button type="dashed" onClick={() => add()} icon={<PlusOutlined />}>
添加商品
</Button>
</>
)}
</Form.List>
这种方式可以灵活应对各种复杂的动态表单需求，同时保持良好的用户体验。
表单联动高级技巧
掌握了基础的级联选择和动态表单项后，我们来看看一些高级技巧，让你的表单更加智能和易用。
表单依赖校验
在某些场景下，某个字段的校验规则可能依赖于其他字段的值。例如，当选择"其他"选项时，需要必填"其他说明"字段。这时可以使用dependencies结合自定义校验规则实现：
<Form.Item name="reason" label="原因">
<Select>
<Select.Option value="late">迟到</Select.Option>
<Select.Option value="sick">生病</Select.Option>
<Select.Option value="other">其他</Select.Option>
</Select>
</Form.Item>
<Form.Item
name="otherReason"
label="其他说明"
dependencies={['reason']}
rules={[
({ getFieldValue }) => ({
validator(_, value) {
const reason = getFieldValue('reason');
if (reason === 'other' && !value) {
return Promise.reject(new Error('请输入其他原因'));
}
return Promise.resolve();
},
}),
]}
>
<Input placeholder="请输入其他原因" />
</Form.Item>
这种方式可以实现复杂的表单校验逻辑，确保数据的完整性和准确性。
使用Form.Provider实现跨表单联动
当页面中有多个表单，且需要它们之间进行联动时，可以使用Form.Provider组件。它允许你在多个表单之间共享数据和方法，实现更复杂的交互逻辑：
<Form.Provider onFormFinish={(name, { values }) => {
if (name === 'basicForm') {
// 当basicForm提交后，更新otherForm的值
otherForm.setFieldsValue({
username: values.username,
});
}
}}>
<Form name="basicForm">
{/* 表单内容 */}
</Form>
<Form name="otherForm">
{/* 表单内容 */}
</Form>
</Form.Provider>
这个功能在处理多步骤表单或复杂页面时特别有用，可以让多个表单协同工作，提升用户体验。
总结与展望
通过本文的介绍，你已经掌握了Ant Design Form组件的级联选择、动态表单项等实用技巧。这些功能可以帮助你轻松应对各种复杂的表单场景，提升开发效率和用户体验。
Ant Design的Form组件还有很多强大的功能，比如自定义表单控件、表单校验优化、性能优化等。建议你深入阅读官方文档，探索更多可能性：components/form/index.zh-CN.md。
希望本文对你有所帮助，如果你有其他关于Ant Design表单的使用技巧或问题，欢迎在评论区留言讨论。别忘了点赞、收藏本文，关注我们获取更多前端开发技巧！
下次我们将介绍Ant Design表单的性能优化技巧，敬请期待！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
