ant-design / ant-design/pro-components
🧐[问题]我在ProFormField上使用了transform,但是onFinish拿到的还是原始值
- 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
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