封装antd中InputNumber可限制保留几位小数的组件

组件实现

你可以使用 formatter 和 parser 属性来设置最多保留x位小数的功能

import { InputNumber } from 'antd';

const InputNumberToFixed = ({ toFixedNum, ...props }: any) => {
    const formatValue = (value) => {
        if (!value) return value;

        // 将输入的值转换为数字类型
        const floatValue = parseFloat(value);

        // 保留x位小数
        const roundedValue = floatValue.toFixed(toFixedNum);
        return roundedValue;
    };

    const parseValue = (value) => {
        // 将输入的值转换为数字类型
        const floatValue = parseFloat(value);

        // 如果转换失败或超过x位小数，则返回原始值
        if (isNaN(floatValue) || floatValue.toString().split('.')[1]?.length > toFixedNum) {
            return value;
        }

        return floatValue;
    };

    return (
        <InputNumber
            {...props}
            formatter={formatValue}
            parser={parseValue}
        />
    );
};

export default InputNumberToFixed;

使用