ant-design / pro-components

🏆 Use Ant Design like a Pro!
https://pro-components.antdigital.dev
MIT License
4.04k stars 1.29k forks source link

🐛[BUG] ProFormTimePicker 更改时间时会返回原本value #8264

Closed HAOYI99 closed 1 month ago

HAOYI99 commented 1 month ago

🐛 bug 描述

首次填时间后,再更改时间会有反弹现象,并且发现convertValue会一直触发 convertValue={(value) => {console.log(value); return value}}

📷 复现步骤

先打开面板然后选择任意时间,比如 01:30:00 然后点面板外面或确定时间 再打开面板选择其他时间,比如我想更改成 04:30:00 我点 4 时候就会一直反弹回去 1

🏞 期望结果

更改时间时不会反弹,allowClear 之后数据也需要完全重置(貌似会保留上个value)

💻 复现代码

dayjs.extend(customParseFormat)

const FormDurationPicker = () => {
    const durationFormat = "HH[h] mm[m] ss[s]";
    const defaultFormat = "YYYY-MM-DD HH:mm:ss";
    const outputFormat = "HH:mm:ss";

    return <ProFormTimePicker name="duration"
        label="Duration"
        width={'sm'}
        placeholder='Select Duration'
        fieldProps={{
            showNow: false,
            needConfirm: false,
            changeOnScroll: true,
            format: durationFormat,
        }}
        rules={[
            { required: true, message: 'Please select Duration' }
        ]}
        convertValue={(value) => {
            if (!value) return value // if no value
            let result = dayjs(value, [outputFormat], true)
            return result.format(durationFormat)
        }}
        transform={(value: any) => {
            let result = dayjs(value, [outputFormat, defaultFormat, durationFormat], true)
            return result.format(outputFormat)
        }}
    />;
}

export default FormDurationPicker

image 2024-03-30 01-36-14

© 版本信息

HAOYI99 commented 1 month ago

顺带一提,我尝试了用ProForm.Item 包裹 TimePicker 也出现convertValue一直触发

HAOYI99 commented 1 month ago

抱歉,找到原因了 是我websocket持续发送数据导致一直触发更新