antd InputNumber 不允许输入小数

<InputNumber min={1} max={999} formatter={limitNumber} parser={limitNumber} />



  /* 限制数字输入框只能输入整数 */
  const limitNumber = value => {
    if (typeof value === 'string') {
      return !isNaN(Number(value)) ? value.replace(/^(0+)|[^\d]/g, '') : ''
    } else if (typeof value === 'number') {
      return !isNaN(value) ? String(value).replace(/^(0+)|[^\d]/g, '') : ''
    } else {
      return ''
    }
  }
  • 7
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
可以通过设置 `formatter` 和 `parser` 属性来实现 Ant Design 的 `InputNumber` 组件限制金额为两位小数。下面是一个示例代码: ```jsx import React, { useState } from 'react'; import { InputNumber } from 'antd'; const App = () => { const [value, setValue] = useState(0); const handleValueChange = (value) => { setValue(value); }; const handleFormatter = (value) => { return `¥ ${value.toFixed(2)}`; }; const handleParser = (value) => { return parseFloat(value.replace(/[^\d\.]/g, '')); }; return ( <InputNumber value={value} min={0} step={0.01} formatter={handleFormatter} parser={handleParser} onChange={handleValueChange} /> ); }; export default App; ``` 在这个示例代码中,我们将 `formatter` 属性设置为一个函数,它接收一个数字类型的参数 `value`,并返回一个字符串类型的值。在这个函数中,我们使用 `toFixed(2)` 方法来限制小数位数为两位,并在前面添加 `¥` 符号。 同时,我们将 `parser` 属性设置为一个函数,它接收一个字符串类型的参数 `value`,并返回一个数字类型的值。在这个函数中,我们使用正则表达式将除了数字和小数点以外的字符替换为空字符串,并使用 `parseFloat` 方法将结果转换为数字类型。 最后,我们将 `min` 属性设置为 `0`,`step` 属性设置为 `0.01`,来限制最小值和步长。这样,我们就可以实现 Ant Design 的 `InputNumber` 组件限制金额为两位小数的要求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值