封装 Form.Item 实现数组转对象

import React from 'react';

import { Cascader, Form } from 'antd';

const data = { province: 'Beijing', city: 'Haidian' };

const options = [

{ value: 'zhejiang', label: 'Zhejiang', children: [{ value: 'hangzhou', label: 'Hangzhou' }] },

{ value: 'jiangsu', label: 'Jiangsu', children: [{ value: 'nanjing', label: 'Nanjing' }] },

];

const createUser = (values) => console.log(values);

const Demo = () => (

<Form

initialValues={{ province: [data.province, data.city] }}

onFinish={(values) => {

const { province, ...rest } = values;

createUser({ province: province[0], city: province[1], ...rest });

}}

<Form.Item label="Address" name="province">

</Form.Item>

</Form>

);

export default Demo;

思路整理

要实现聚合字段功能，我们需要用到 getValueProps getValueFromEvent transform，从而实现数据从 FormStore 中的转化，以及变更时重新传入 FormStore 结构中。

getValueProps

默认情况下，Form.Item 会将 FormStore 中的字段值作为 value prop 传递给子组件。而通过 getValueProps 可以自定义传入给子组件的 props 从而实现转化功能。在聚合场景中，我们可以遍历 names 分别将 FormStore 中的值组合为一个 value 传递给子组件：

tsx

getValueProps={() => ({ value: names.map((name) => form.getFieldValue(name)) })}

getValueFromEvent

当子组件修改值时，使用 setFields 方法将子组件返回的聚合 value 分别设置给对应的 name，从而实现更新 FormStore 中 names 的值：

tsx

getValueFromEvent={(values) => {
    form.setFields(names.map((name, index) => ({ name, value: values[index] })));
    return values[0];
}}

transform

rules 中校验默认提供的 value 来源于子组件变更时传递给 name 对应的值，还需要从 FormStore 获取 names 的值使用 transform 方法修改 rules 的 value：

tsx

rules={[{
  transform: () => {
    const values = names.map((name) => form.getFieldValue(name));
    return values;
  },
}]}

总结

通过这种方式，我们实现了一个可以在 Form.Item 中操作多个 name 的功能，使得表单逻辑更加清晰和易于维护。

除了文中的 Cascader 示例，同样适用于 DatePicker.RangePicker 等组件。换句话说，只要是需要聚合多个字段的场景，都可以使用这种方式。

另外此示例还有些边界场景没有考虑，比如 setFields([{ name:'city' value:'nanjing' }]) 不会更新 Cascader 选中的值，需要增加 Form.useWatch(values => resetNames.map(name => get(values, name)), form); 达到刷新效果等。

更多的边界问题就交给你去试试吧~

Ant Design

封装 Form.Item 实现数组转对象

封装聚合字段组件

思路整理

getValueProps

getValueFromEvent

transform

最终效果

总结