antd Input和InputNumber的细节

最新推荐文章于 2025-01-20 11:14:53 发布

cvory

最新推荐文章于 2025-01-20 11:14:53 发布

阅读量1w

点赞数 1

分类专栏： antd react

本文链接：https://blog.csdn.net/qq_40593656/article/details/105077269

版权

react 同时被 2 个专栏收录

43 篇文章

订阅专栏

antd

18 篇文章

订阅专栏

博客探讨了在使用Ant Design的InputNumber时遇到的'xxx is not string'错误，指出InputNumber的max和min属性需要与rules中的max和min匹配，否则会导致类型错误。解决方案是确保规则配置正确，并展示了保留一位小数的InputNumber用法，以及如何在InputNumber后添加单位以满足样式需求。作者强调基础问题和仔细阅读文档的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

InputNumber 提示’xxx is not string’

在这里插入图片描述
代码如下：

  {getFieldDecorator('feeRate', {
              initialValue: (feeRate * 100).toFixed(1),
              rules: [
                {
                  required: true,
                  message: '请输入费率',
                },
                {
                  max:10,
                  message:"最大值为10"
                },
                {
                  min:0,
                  message:"最小值为0"
                },
              ],

            })( <InputNumber min={0} max={1} step={0.1}/>)}

错误：InputNumber的max和min是写在标签上的，rules里的max和min是匹配Input,识别为string
但是标签又是InputNumber,所以报错

正解：

{getFieldDecorator('feeRate', {
              initialValue: (feeRate * 100).toFixed(1),
              rules: [
                {
                  required: true,
                  message: '请输入费率',
                }
              ],
            })( <InputNumber min={0} max={1} step={0.1}/>)}

Input或者InputNumber 保留小数点1位

代码如下：

{getFieldDecorator('feeRate', {
              initialValue: (feeRate * 100).toFixed(1),
              rules: [
                {
                  required: true,
                  message: '请输入费率',
                },
                {
                  required: false,
                  pattern: new RegExp(/^[0-9]+(\.[0-9]{1,1})?$/, "g"),
                  message: '小数点后保留一位',
                },
              ],

            })( <InputNumber min={0} max={1} step={0.1}/>)}

Form里InputNumber后面加单位

想要的样式如下：

代码如下：

<FormItem label="费率">
            {getFieldDecorator('feeRate', {
              initialValue: (feeRate * 100).toFixed(1),
              rules: [
                {
                  required: true,
                  message: '请输入费率',
                },
                {
                  required: false,
                  pattern: new RegExp(/^[0-9]+(\.[0-9]{1,1})?$/, "g"),
                  message: '小数点后保留一位',
                },
              ],

            })( <InputNumber min={0} max={1} step={0.1}/>)}
            <span className="ant-form-text"> %</span>
          </FormItem>
          <p style={{ textAlign: 'center', fontSize: '12px' }}>(费率范围为：0%-1.0%，保留小数点后一位)</p>