解决 React 中的 input 输入框在中文输入法下的 bug
以下会涉及到的技术点：react mobx compositionstart compositionupdate compositionend
问题描述
在使用 input 时，通常会对输入的内容做校验，校验的方式无非两种：
- 允许用户输入，并且做错误提示；
- 不允许用户输入正则或者函数匹配到的字符。
现有如下需求：“仅允许输入英文、数字和汉字，不允许输入其他特殊字符和符号”。显然这种场景需要使用第二种校验方式。
然后我自以为很机智的写了下面的代码（引入了组件库 cloud-react），在输入值变化的时候（onChange 事件），处理绑定到 input 上的 value，将除了英文、数字、和汉字之外的字符都替换成空字符串。
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 事件，而你输入过程中的这个产物在校验中被吃掉了，留下了一坨空字符串，所以就发生了上面那个神奇的现象。
vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com
解决方案
这里需要用到两个属性：compositionstart、compositionend
简单点来说，就是当你开始使用输入法进行新的输入的时候，会触发 compositionstart ，中间过程其实也有一个函数 compositionupdate，顾名思义，输入更新时会触发它；当结束输入法输入的时候，会触发 compositionend。
下面进入正题：
首先，我们先看一下 Input 组件的一个很正常的实现：
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 组件有两种应用场景：
- 不受控的输入框：业务方不给组件传入 value，无法控制输入框的值；
- 受控的输入框：业务方可以通过给组件传入 value，从而可以在外部控制输入框的值。
不受控的输入框在我使用过程中并没有什么 bug，此处不做赘述，此处只谈受控的输入框，也就是我们需求（仅允许输入英文、数字和汉字，不允许输入其他特殊字符和符号）中需要使用的场景。
前面提到的 compositionstart 和 compositionend 该出场了：利用这两个属性的特点，在输入拼音的“过程中”不让 input 触发 onChange 事件，自然就不会触发校验，好了，既然有了思路，开始码代码。
我们定义一个变量 isOnComposition 来判断是否在“过程中”
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 来测试这个代码，发现事情又神奇了一点呢，这次拼音压根就输不进去了哇～
我查看了下在输入拼音时函数的调用:
是的，宁没有看错，只触发了onCompositionstart 和 onCompositionupdate这两个函数，我起初以为是逻辑被我写扣圈了，想了想原因（其实我想了好久，人略笨，见笑）：
罪魁祸首就是绑定在 input 上的那个 value，输入拼音的过程中，state.value 一直没变，input 中自然不会有任何输入值，没有输入值，也就完成不了输入过程，触发不了 compositionend，一直处于“过程中”。
所以这次不是程序逻辑扣圈，是中断了。
于是我又想如何把中断的程序接起来（对的，垮掉了我们就捡起来，哈），完成这个链条。
我想了好多办法，也在网上看了好多办法，可惜都解决不了我的困境。
各种心酸不堪回首，幸好最后找到了一个办法：其实想想原来代码中用 state.value 去控制 input 值的变化，还是没有把 input 中何时输入值的控制权放在自己手里，“过程中”这个概念也就失去了意义。只要 state.value 还和 input 绑在一起，就是我自己玩我自己的，人家玩人家的。于是，就有了下面让控制权回到我手中的代码。
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}
/>
}
}测了一下，大致上是没问题了。
还要看一下谷歌浏览器和火狐浏览器，果然还有坑：
- 火狐浏览器中的执行顺序：compositionstart compositionend onChange
- 谷歌浏览器中的执行顺序：compositionstart onChange compositionend
最后再做一下兼容处理，修改一下 handleComposition 函数
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 事件的，因此加了判断，对谷歌浏览器做了特殊处理（其它浏览器暂时没做考虑和处理）。
后记
到此，正文结束了，我还要说两个需要注意的地方，其实也是踩了的坑：
- 如果 Input 组件的实现使用了 React.PureComponent ，在以上需求中会出现的问题：输入特殊字符时，外部通过正则将其 replace 掉了，传入 Input 组件内部的 value 实际上没有任何变化，也不会触发组件 render。这是因为 PureComponent 对 shouldComponentUpdate 函数做了优化，如果发现 props 和 state 上的属性都没有变化，不会重新渲染组件，因此我暂时的处理是：使用 React.Component ，组件实现中对 shouldComponentUpdate 封装。
- 在外部使用 mobx 的时候，如果使用 observable 监听 value，会出现和上面蕾丝的情况—输入特殊字符时，通过正则将其 replace 掉了，mobx 也发现 value 没有任何变化，就不会触发 render，我暂时的处理是使用 state，虽然我觉得这不是最好的办法，但我目前还想不到其它的处理方式。
