Input银行账户限制输入数字和间隔

先写好一个Input

                <input
                  autoComplete="off"
                  id="bankAccount"
                  onKeyPress={this.inputNumber}
                  ref={(e) => (this.bankAccountRef = e)}
                  onChange={(e) => this.enterNumber(e)}
                  value={accountNumber}
                />

设定每4个数字空一格

  inputNumber = () => {
    const bankAccount = document.getElementById("bankAccount");
    if (bankAccount.value.length > 0) {
      if (
        (bankAccount.value.length + 1) % 5 == 0 &&
        bankAccount.value.length > 0
      ) {
        bankAccount.value += " ";
      }
    }
  };

设定只能输入数字的正则

enterNumber = (e) => {
    let number = e.target.value.replace(/[^\d]/g, '').replace(/(.{4})/g,'$1 ').replace(/ $/g,'')
    this.setState({
      accountNumber: number,
      accountData: number.replace(/\s+/g, ""),//使传递数据时去掉空格
		});
	};

非Input显示一串银行账号时每4个空一行

  formatNumber = (number) => {
    return number.replace(/(.{4})/g, "$1 ");
  };