ant-design / ant-design/pro-components

🧐[问题]我在ProFormField上使用了transform,但是onFinish拿到的还是原始值

Open
#9,238 5 comments 0 reactions 0 assignees View on GitHub
🧱 antd
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

提问前先看看:

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

### 🧐 问题描述
我希望提交到后端的数据是一个 json 字符串,在组件中需要 object 类型的值,我尝试使用了官方提供的convertValue和transform组件来做这个事,但是我发现transform虽然会成功转化了数据,但是在onFinish提交的时,拿到的 values 内部还是一个 object 类型的值,这是为什么呢?

### 💻 示例代码
```tsx
import { ProForm, ProFormField } from '@ant-design/pro-components';
import { Input, Select, type SelectProps, Space, Typography } from 'antd';

interface ITypeValue {
type?: string;
value?: string;
}
interface SelectInputProps {
value?: ITypeValue;
onChange?: (value?: ITypeValue) => void;
options?: SelectProps['options'];
}
const SelectInput = (props: SelectInputProps) => {
const { value = {}, onChange } = props;

const handleChange = (key: 'type' | 'value', val?: string) => {
const newValue = { ...value, [key]: val };
onChange?.(newValue.type || newValue.value ? newValue : undefined);
};

return (

handleChange('type', type || undefined)}
allowClear
/>
handleChange('value', e.target.value)}
allowClear
/>

);
};

export default function () {
return (
{
console.log(values);
}}
>
{
const res =
typeof values === 'object' ? JSON.stringify(values) : values;
console.log('transform', res);
return res;
}}
convertValue={values => {
const res = typeof values === 'string' ? JSON.parse(values) : values;
console.log('convertValue', res);
return res;
}}
renderFormItem={() => (

)}
/>

);
}
```

### 🚑 其他信息

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the provided TypeScript example with ProFormField, focusing on the interaction among transform, convertValue, renderFormItem, and ProForm's onFinish. Trace the value passed through these entry points and compare the transformed result with the object received in values. Done means the behavior is explained and the submitted value matches the documented expectation, or the issue is clearly documented as expected behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.