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

最近本山人在项目的开发过程中遇到这么一个问题：

在列表中嵌入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 onChange
      if (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 <input
      ref={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