html文本框 切换中文输入法,解决 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

onChange={this.onChange.bind(this)}

value={this.state.value}

/>

}

}

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

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

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

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

解决方案

这里需要用到两个属性：

compositionstart

compositionend

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