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 "));
        }
      }

這樣就可以達到想要的結果了，你在提交表單的時候記得要把值得空格給去掉提交給後臺，但是在返現的時候需要在框裏觸動一下才會顯示你需要的樣式，如果你不觸發就會顯示成這樣的