高级表单ProForm之数据转化
很多时候组件需要的数据和后端需要的数据之间不能完全匹配,ProForm 为了解决这个问题提供了 transform 和 convertValue 两个 API 来处理这种情况。
1. convertValue 前置转化
convertValue 发生在组件获得数据之前,一般是后端直接给前端的数据,有时需要精加工一下。
例如:
export type SearchConvertKeyFn = (value: any, field: NamePath) => string | Record<string, any>;
convertValue?: SearchConvertKeyFn;
参数说明:
获取时转化值,一般用于将数据格式化为组件接收的格式
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>
formRef 内置了几个方法来获取转化之后的值,这也是相比 antd 的 Form 多的功能,详细可以看 ProFormInstance 的类型定义。
- 获取被 ProForm 格式化后的所有数据
getFieldsFormatValue?: (nameList?: true) => T
;- 获取格式化之后的单个数据
getFieldFormatValue?: (nameList?: NamePath) => T;
getFieldFormatValueObject?: (nameList?: NamePath) => T;
- 验字段后返回格式化之后的所有数据
validateFieldsReturnFormatValue?: (nameList?: NamePath[]) => Promise<T>;
例如:
export type SearchTransformKeyFn = (
value: any,
namePath: string,
allValues: any,
) => string | Record<string, any>;
transform?: SearchTransformKeyFn;
参数说明:
提交时转化值,一般用于将值转化为提交的数据
value
字段的值namePath
字段的nameallValues
所有的字段
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工程师】 "
};
}}
/>
接下来我们输入”张三“来看下转换后的效果
未完待续。。。