antd Input和InputNumber的细节

  1. 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}/>)}
  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}/>)}
  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>

其实是些很基础的问题,
但是因为运用的不熟悉,
以及看文档不够仔细耽误了时间
后期会持续更新。

猜你喜欢

转载自blog.csdn.net/qq_40593656/article/details/105077269