DurationDays.jsx

import React, { useState } from 'react';
import { Form, Select, InputNumber } from 'antd';

const { Option } = Select;

const DurationDays = (props) => {
    const { value = {}, onChange } = props
    const limitNumber = value => {
        return value.replace(/^(0+)|[^\d]+/g, '')
    }
    const [date, setDate] = useState();
    const triggerChange = (changedValue) => {
        onChange?.({
            date,
            ...value,
            ...changedValue,
        });
    };

    const onDateChange = (values) => {
        if (values) {
            setDate(values);
        } else {
            setDate();
        }

        triggerChange({
            date: values,
        });
    };

    return (
        <div style={{ display: 'flex', alignItems: 'center' }}>
            <InputNumber
                value={value.date || date}
                formatter={limitNumber}
                parser={limitNumber}
                onChange={onDateChange}
                placeholder={props?.placeholder || "请输入任务持续天数"}
                style={{ flex: 1 }}
            />
            <span style={{ paddingLeft: 16 }}>天</span>
        </div>
    );
}

export default DurationDays;