input增加正则限制非法字符后不能连续输入汉字 的问题

Question

问题：
一个有意思的问题，今天在给受控输入框增加输入限制时，发现不能连续输入汉字了。

代码如下:

onChangeName = name => {
    if (/^[a-zA-Z0-9\u4E00-\u9FA5]{0,15}$/.test(name)) {
      this.setState({name});
    }
  };

<InputItem clear placeholder="怎么称呼宝贝" value={name} onChange={this.onChangeName}>
          宝贝昵称
        </InputItem>

去掉if判断，直接setstate，没有问题。

Answer 1

其实在输入汉字时，虽然汉字中间没有空格，但是在input中显示的拼音之间，默认是有空格隔开的，如图，ni 和 hao 之间被默认断开。

所以，在正则判断输入时，放开空格限制，在最后提交时在过滤空格

onChangeName = name => {
    name = name.trim();
    // 这里为什么要加 \s:中文输入法时连词的拼音中间会默认给加上空格
    // 没有\s时,不能连续输入中文,\s在提交时过滤
    if (/^[a-zA-Z0-9\u4E00-\u9FA5\s]{0,15}$/.test(name)) {
      this.setState({name});
    }
  };