input框与antd表单结合限制最多只能输入一位小数

需求： input框与antd表单结合限制最多只能输入一位小数，使用getFieldDecorator的getValueFromEvent方法

正则表达式：/^(-)(\d+).(\d{0,1}).$/g

最终实现图：

具体代码

{
                                    getFieldDecorator('xxx', {
                                        initialValue: xxx,
                                        rules: [{ required: true, message: 'xxx' }],
                                        getValueFromEvent(e) {
                                            // 正则 replace方法
                                            // 使用replace方法来替换
                                            return e.target.value.replace(/^(\-)*(\d+)\.(\d{0,1}).*$/g, '$1$2.$3')
                                        }
                                    })(<Input type='number' />)
                                }

正则表达式分析

/^(-)(\d+).(\d{0,1}).$/g

1. 整数部分

• - ：匹配字符的意思
• *：匹配前面的子表达式零次或多次,
• \d+ ： \d 为整数，+表示至少出现过一次， 0-9之间的数字至少出现1次

2. 小数部分

• {0,1}：最少匹配 0 次且最多匹配 1 次
• .*：单个字符匹配任意次（贪婪匹配）
• .*?：满足条件的情况只匹配一次 （懒惰匹配）