在react中的输入字段中每4个数字后面添加一个空格

Question

我正在尝试在输入字段中每 4 个数字后添加一个空格。

这是我的代码：

    credit: function(e) {
        const val = e.target.value;
        const valArray = val.split(' ').join('').split('');
        if(isNaN(valArray.join('')))
            return;
        if(valArray.length === 17)
            return
        if(valArray.length % 4 === 0) {
            this.setState({ number: e.target.value + "  " });
        }else{
            this.setState({ number: e.target.value})
        }
  },

规则如下：用户只能写入numbers，长度应为 16，并在每 4 个数字后添加空格。

问题是 ：

1：在数字末尾有一个额外的空格，添加在最后一个数字之后

2：我无法使用backspace删除元素（推回空格后，它将在数字前面添加空格）

小提琴

Answer 1

这是一个简约的示例： https: //jsfiddle.net/unah2qzf/

这里关键是设置onchange方法

onChange(e) {
  var val = e.target.value;
  this.setState({
    number: val.replace(/\W/gi, '').replace(/(.{4})/g, '$1 ')
  });
}

我相信你可以从这里弄清楚如何限制数字