inputNumber超过两位拦截输入

148 阅读1分钟

arco的inputNumber只能通过配置属性设置精度和步长
但是这个有两个问题 1.普通的.toFixed会有精度丢失 2.不能在输入的时候限制

import { useState } from 'react';
import { InputNumber } from '@arco-design/web-react';

const App = () => {
  const [value, setValue] = useState(0);

  const handleValueChange = (value) => {
    setValue(value);
  };

  const formatter = (value) => {
    const formattedValue = value.replace(/(\.\d{2})\d*$/, '$1');
    return formattedValue;
  };

  const parser = (value) => {
    const parsedValue = parseFloat(value);
    return isNaN(parsedValue) ? 0 : parsedValue;
  };

  return (
    <InputNumber
      value={value}
      onChange={handleValueChange}
      formatter={formatter}
      parser={parser}
    />
  );
};

完美解决