React的银行卡样式显示

**需求：**客户要求说的银行卡卡号太长全部链接在一起不好区分，不好观察判断是否输入错误要显示成xxxx xxxx xxxx xxxx 样式的。

**总结：**记录这个是就是因为自己研究了半天，就记录一下，开始的思路是因为在input框中显示，所以考虑的是通过input框去调取数据，然后将值取出来，后set到一个地方在去取出来，但是取到的值可以是需求样式，但是显示到框里面就不会改变，然后自己有百度了一些，延时加载的方法，还是不能起作用，可能还是自己能力的不足，思维没有放开，老想着值在input框就要去不停的去操作input框，而没有把思维放开去操作From表单，当值想到操作from表单后就会有你想要的答案

<FormItem label="账号">
  {getFieldDecorator('accno', {
     initialValue: '',
     validateTrigger: 'onBlur',
     getValueFromEvent: e => {
       // 进行你想要的操作
       const num1 = e.target.value;
       const num2 = num1.replace(/\s*/g, '');
       const result = [];
       for (let i = 0; i < num2.length; i += 1) {
         if (i % 4 === 0 && i !== 0) {
           result.push(' ' + num2.charAt(i));
         } else {
           result.push(num2.charAt(i));
         }
       }
       const num3 = result.join('');
       return num3;
     },
     rules: [{
       required: true, message: '请输入账号',
     },
       {
         pattern: /^[\d+\s*/g]{1,23}$/,
         message: '只能为数字，小于等于19位!',
       }],
   })(<Input placeholder="必填 请输入" type="text" onBlur={this.hbQuery} />)}
 </FormItem>

方法优化

buyCard(value) {
        //格式化银行卡号
        if (value == undefined) {
          return value;
        } else {
          return (value = value
            .replace(/\s/g, "")
            .replace(/(\d{4})(?=\d)/g, "$1 "));
        }
      }

这样就可以达到想要的结果了，你在提交表单的时候记得要把值得空格给去掉提交给后台，但是在返现的时候需要在框里触动一下才会显示你需要的样式，如果你不触发就会显示成这样的