货币输入的 InputNumber？

Question

我需要输入货币金额。无论如何自定义 InputNumber 以支持逗号 (',') 或 $?

类似于这些：

http://leonardowf.github.io/react-simple-currency/

https://github.com/jsillitoe/react-currency-input

我现在正在使用 form 和 InputNumber，但是（对于用户）如果没有至少每千个逗号就很难阅读：

<Col span='24'>
   <FormItem label='Original Investment'>
         {getFieldDecorator('originalInvestment', {
           rules: [{ required: true, message: 'Please input your Investment!' }],
           initialValue: 100000000
         })(
            <InputNumber min={100000000} max={10000000000} />
         )}
   </FormItem>
</Col>

Answer 1

暂不支持，可以追踪https://github.com/ant-design/ant-design/issues/4681

Answer 2

使用这个库。它维护得很好并且经过了很好的测试 https://github.com/s-yadav/react-number-format。我尝试了很多图书馆。这解决了我的问题

Answer 3

您可以使用格式化程序属性来实现此目的

<InputNumber
  defaultValue={1000}
  formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
  parser={value => value.replace(/$\s?|(,*)/g, '')}
  onChange={onChange}
/>

查看https://ant.design/components/input-number/#components-input-number-demo-formatter了解更多

货币输入的 InputNumber？

InputNumber for a currency input?

antd