最近本山人在项目的开发过程中遇到这么一个问题：
在列表中嵌入antd的Input输入框，切换到微软输入法输入时，就不能成功输入中文字符，然而搜狗输入法又是正常的。
研究一番，发现是input的value这王八蛋在搞事情，每次输入都会调用onChange事件。而搜狗输入法和微软的输入法对onChange调用机制不同，所以就会出现这种情况（至于有何不同，在这里就不做陈述了，麻烦各位自行问度娘）。
解决方法：对input框进行二次封装，对onChange调用机制进行处理。
话不多说，直接撸代码才是王道（这里封装的比较简单，因为本山人的项目对input框的需求不多，各位看官可自行完善）
import React, {Component, createRef } from 'react';import PropTypes from 'prop-types';class ControlledInput 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;// 谷歌浏览器：compositionstart onChange compositionend// 火狐浏览器：compositionstart compositionend onChangeif (navigator.userAgent.indexOf('Chrome') > -1) {this.onChange(evt);}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 <inputref={this.inputRef}type="text"style={{width: '100%', border: '0.1px solid #e8e8e8', outlineColor:'#e8e8e8' }}{...commonProps}/>}}ControlledInput.propTypes = {onChange: PropTypes.func};ControlledInput.defaultProps = {onChange: () => {}};export default ControlledInput;
各位看官，在下也不想装逼，实则有人已对此问题做过详细描述了，看在各位已经看过本山人文章的份上，就透露给大家吧，以表各位一览之恩：解决 React 中的 input 输入框在中文输入法下的 bug
