解决 React 中的 input 输入框在中文输入法下的 bug

以下会涉及到的技术点：react mobx compositionstart compositionupdate compositionend

问题描述

在使用 input 时，通常会对输入的内容做校验，校验的方式无非两种：

  1. 允许用户输入，并且做错误提示；
  2. 不允许用户输入正则或者函数匹配到的字符。

现有如下需求：“仅允许输入英文、数字和汉字，不允许输入其他特殊字符和符号”。显然这种场景需要使用第二种校验方式。

然后我自以为很机智的写了下面的代码（引入了组件库 cloud-react），在输入值变化的时候（onChange 事件），处理绑定到 input 上的 value，将除了英文、数字、和汉字之外的字符都替换成空字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default class CompositionDemo extends Component {
  constructor() {
     this.state = {
       value: ''
     };
  }
  
  onChange(evt) {
     this.setState({
       value: evt.target.value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]/g, '')
     });
  };
  
  render() {
    return <Input
        onChange={this.onChange.bind(this)}
      	value={this.state.value}
   	/>
  }
}

平平常常，普普通通，一切看起来都是正常的操作，结果，当我输入拼音的时候，神奇的事情发生了：连拼的时候除了最后一个字，前面的都变成了字符。

what??? 小问号，你是否有很多朋友？

于是，我踏上了一条不归路，呸呸呸，是打开了新世界的大门，就是这个门对于我来说可能有点沉，推了两天才看到新世界。

纠其原因：拼音输入是一个过程，确切的说，在这个过程中，你输入的每一个字母都触发了 onChange 事件，而你输入过程中的这个产物在校验中被吃掉了，留下了一坨空字符串，所以就发生了上面那个神奇的现象。

解决方案

这里需要用到两个属性：

compositionstart

compositionend

简单点来说，就是当你开始使用输入法进行新的输入的时候，会触发 compositionstart ，中间过程其实也有一个函数 compositionupdate，顾名思义，输入更新时会触发它；当结束输入法输入的时候，会触发 compositionend。

下面进入正题：

首先，我们先看一下 Input 组件的一个很正常的实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class InputDemo1 extends Component {

    constructor(props) {
        super(props);
        this.state = {
            value: '',
        };
    }
    static getDerivedStateFromProps({ value }, { value: preValue }) {
        if (value !== preValue) {
            return { value };
        }
        return null;
    }

    onChange = evt => {
        this.props.onChange(evt);
    };

    render() {
        return <input
            value={this.state.value}
            type="text"
            onChange={this.onChange}
        />
    }
}

Input 组件有两种应用场景：

  1. 不受控的输入框：业务方不给组件传入 value，无法控制输入框的值；
  2. 受控的输入框：业务方可以通过给组件传入 value，从而可以在外部控制输入框的值。

不受控的输入框在我使用过程中并没有什么 bug，此处不做赘述，此处只谈受控的输入框，也就是我们需求（仅允许输入英文、数字和汉字，不允许输入其他特殊字符和符号）中需要使用的场景。

前面提到的 compositionstart 和 compositionend 该出场了：利用这两个属性的特点，在输入拼音的“过程中”不让 input 触发 onChange 事件，自然就不会触发校验，好了，既然有了思路，开始码代码。

我们定义一个变量 isOnComposition 来判断是否在“过程中”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
isOnComposition = false;

handleComposition = evt => {
  if (evt.type === 'compositionend') {
    this.isOnComposition = false;
    return;
  }

  this.isOnComposition = true;
};

 onChange = evt => {
   if (!this.isOnComposition) {
     this.props.onChange(evt);
   }
 };

render() {
  const commonProps = {
    onChange: this.onChange,
    onCompositionStart: this.handleComposition,
    onCompositionUpdate: this.handleComposition,
    onCompositionEnd: this.handleComposition,
  };
  return <input
    value={this.state.value}
    type="text"
  	{...commonProps}
  />
}

你以为就这么轻松解决了么？

呵，你想多了！

我仍然使用开篇那个 demo 来测试这个代码，发现事情又神奇了一点呢，这次拼音压根就输不进去了哇～

我查看了下在输入拼音时函数的调用

![image-20200615005541929](/Users/liyuanmeng/Library/Application Support/typora-user-images/image-20200615005541929.png)

是的，宁没有看错，只触发了onCompositionstart 和 onCompositionupdate这两个函数，我起初以为是逻辑被我写扣圈了，想了想原因（其实我想了好久，人略笨，见笑）：

罪魁祸首就是绑定在 input 上的那个 value，输入拼音的过程中，state.value 一直没变，input 中自然不会有任何输入值，没有输入值，也就完成不了输入过程，触发不了 compositionend，一直处于“过程中”。

所以这次不是程序逻辑扣圈，是中断了。

于是我又想如何把中断的程序接起来（对的，垮掉了我们就捡起来，哈），完成这个链条。

我想了好多办法，也在网上看了好多办法，可惜都解决不了我的困境。

各种心酸不堪回首，幸好最后找到了一个办法：其实想想原来代码中用 state.value 去控制 input 值的变化，还是没有把 input 中何时输入值的控制权放在自己手里，“过程中”这个概念也就失去了意义。只要 state.value 还和 input 绑在一起，就是我自己玩我自己的，人家玩人家的。于是，就有了下面让控制权回到我手中的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React, { Component, createRef } from 'react';
import PropTypes from 'prop-types';

export default class InputDemo extends Component {

    inputRef = createRef();

    isOnComposition = false;

    componentDidMount() {
        this.setInputValue();
    }

    componentDidUpdate() {
        this.setInputValue();
    }

    setInputValue = () => {
        this.inputRef.current.value = this.props.value || ''
    };

    handleComposition = evt => {
        if (evt.type === 'compositionend') {
            this.isOnComposition = false;
            return;
        }

        this.isOnComposition = true;
    };

    onChange = evt => {
        if (!this.isOnComposition) {
            this.props.onChange(evt);
        }
    };

    render() {
        const commonProps = {
            onChange: this.onChange,
            onCompositionStart: this.handleComposition,
            onCompositionUpdate: this.handleComposition,
            onCompositionEnd: this.handleComposition,
        };
        return <input
            ref={this.inputRef}
            type="text"
            {...commonProps}
        />
    }
}

测了一下，大致上是没问题了。

还要看一下谷歌浏览器和火狐浏览器，果然还有坑：

  1. 火狐浏览器中的执行顺序：compositionstart compositionend onChange
  2. 谷歌浏览器中的执行顺序：compositionstart onChange compositionend

最后再做一下兼容处理，修改一下 handleComposition 函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
handleComposition = evt => {
  if (evt.type === 'compositionend') {
    this.isOnComposition = false;

    // 谷歌浏览器：compositionstart onChange compositionend
    // 火狐浏览器：compositionstart compositionend onChange
    if (navigator.userAgent.indexOf('Chrome') > -1) {
      this.onChange(evt);
    }

    return;
  }

  this.isOnComposition = true;
};

因为不管中间执行了那些函数，最后都是需要执行 onChange 事件的，因此加了判断，对谷歌浏览器做了特殊处理（其它浏览器暂时没做考虑和处理）。

完整代码 https://github.com/liyuan-meng/my-react-app/tree/master/src/inputAndComposition

后记

到此，正文结束了，我还要说两个需要注意的地方，其实也是踩了的坑：

  1. 如果 Input 组件的实现使用了 React.PureComponent ，在以上需求中会出现的问题：输入特殊字符时，外部通过正则将其 replace 掉了，传入 Input 组件内部的 value 实际上没有任何变化，也不会触发组件 render。这是因为 PureComponent 对 shouldComponentUpdate 函数做了优化，如果发现 props 和 state 上的属性都没有变化，不会重新渲染组件，因此我暂时的处理是：使用 React.Component ，组件实现中对 shouldComponentUpdate 封装。
  2. 在外部使用 mobx 的时候，如果使用 observable 监听 value，会出现和上面蕾丝的情况—输入特殊字符时，通过正则将其 replace 掉了，mobx 也发现 value 没有任何变化，就不会触发 render，我暂时的处理是使用 state，虽然我觉得这不是最好的办法，但我目前还想不到其它的处理方式。