浅谈ProForm中的数据转化

高级表单ProForm之数据转化

很多时候组件需要的数据和后端需要的数据之间不能完全匹配，ProForm 为了解决这个问题提供了 transform 和 convertValue 两个 API 来处理这种情况。

1. convertValue 前置转化

convertValue 发生在组件获得数据之前，一般是后端直接给前端的数据，有时需要精加工一下。

例如：

export type SearchConvertKeyFn = (value: any, field: NamePath) => string | Record<string, any>;
convertValue?: SearchConvertKeyFn;
1
2

参数说明：

获取时转化值，一般用于将数据格式化为组件接收的格式

• value 字段的值
• namePath 字段的name

使用样例：

• a,b => [a,b] ： convertValue: (value,namePath)=> value.split(",")
• string => json： convertValue: (value,namePath)=> JSON.parse(value)
• number => date： convertValue: (value,namePath)=> Moment(value)
• YYYY-MM-DD => date： convertValue: (value,namePath)=> Moment(value,"YYYY-MM-DD")
• string => object： convertValue: (value,namePath)=> { return {value,label:value} }

2. transform 提交时转化

transform 发生在提交的时候，一般来说都是吐给后端的存在数据库里的数据。
为了方便大家使用，ProFormDependency 和 formRef 都支持了 transform，可以获取到被转化后的值。

<ProFormDependency>
  {(value, form) => {
    // value 被 transform转化之后的值
    // form 当前的formRef，可以获取未转化的值
    return ReactNode;
  }}
</ProFormDependency>
1
2
3
4
5
6
7

formRef 内置了几个方法来获取转化之后的值，这也是相比 antd 的 Form 多的功能，详细可以看 ProFormInstance 的类型定义。

• 获取被 ProForm 格式化后的所有数据
  getFieldsFormatValue?: (nameList?: true) => T;
• 获取格式化之后的单个数据
  getFieldFormatValue?: (nameList?: NamePath) => T;
getFieldFormatValueObject?: (nameList?: NamePath) => T;
• 验字段后返回格式化之后的所有数据
  validateFieldsReturnFormatValue?: (nameList?: NamePath[]) => Promise;

例如：

export type SearchTransformKeyFn = (
    value: any,
    namePath: string,
    allValues: any,
  ) => string | Record<string, any>;
  
  transform?: SearchTransformKeyFn;
1
2
3
4
5
6
7

参数说明：

提交时转化值，一般用于将值转化为提交的数据

• value 字段的值
• namePath 字段的name
• allValues 所有的字段

returns 字段新的值，如果返回对象，会和所有值 merge 一次

使用样例：

• {name:[a,b] => {name:a,b } transform: (value,namePath,allValues)=> value.join(“,”)
• {name: string => { newName:string } transform: (value,namePath,allValues)=> { newName:value }
• {name:moment} => {name:string transform: (value,namePath,allValues)=>value.format(“YYYY-MM-DD”)
• {name:moment}=> {name:时间戳} transform: (value,namePath,allValues)=>value.valueOf()
• {name:{value,label}} => { name:string} transform: (value,namePath,allValues)=> value.value
• {name:{value,label}} => { valueName,labelName } transform:(value,namePath,allValues)=> {valueName:value.value, labelName:value.name }

代码示例：

加入我们想给传入name加上职位信息，我们就可以使用transform惊醒如下数据转换。

  <ProFormText width="md" name="name" label="姓名" placeholder="请输入名称" 
               transform={(value) => {
                console.log(value)
                return {
                  name:value+"-【java工程师】 "
                };
              }}
       />
1
2
3
4
5
6
7
8

接下来我们输入”张三“来看下转换后的效果

未完待续。。。