reactjs - 如何使用 Ant Design 将输入数字限制为最多两位小数？

Question

例如53.23或20.15但不超过 2 个小数。想知道是否有针对此的 Ant Design API。

<InputNumber
  defaultValue={10}
  style={{ width: '30%', marginLeft: 28 }}
  name="quantity"
/>

Answer 1

您只需要precision在 InputNumber 内使用或math.round

<InputNumber
     placeholder='Value'
     onChange={(value) => provideFunctionValue(value)}
     min={1}
     precision={2}
     step={0.1}
     max={10}
/>

您还应该尝试使用上述答案，toFIxed(2)但这在我的情况下不起作用。

Answer 2

没有这样的API，主要原因可能是认为“格式化为十进制”（你应该将数字四舍五入到最接近的小数点吗？你应该把它切成一个字符串吗？），所以开发人员必须决定如何手动处理：

const twoPointDecimal = number => Number(number).toFixed(2);

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

  const onChange = number => setValue(twoPointDecimal(number));

  return (
    <FlexBox>
      <InputNumber
        value={value}
        onChange={onChange}
        defaultValue={10}
        style={{ width: '30%', marginLeft: 28 }}
        name="quantity"
      />
    </FlexBox>
  );
};