react onCompositionStart/Update/onCompositionStartEnd 触发时

环境

1：react 15.5.0

2：antd 2.13.7

3：chrome 64

在使用antd的Input控件时由于控制了输入字符串的长度，导致在输入汉字时不能正确输入。
原因：在OnChange事件中不能准确获得输入的文字字符串，如果使用输入法输入汉字，
会被识别为一连串英文字符串。
三个事件的触发时间分别为：输入开始时，输入进行中，和输入完成时。需要注意
前2个事件都在onChange之前触发，onCompositionEnd是在onChange之后触发。
另外如果直接输入完成是不会触发这三个事件的，只有onChange事件。比如直接输入英文。如果input的value没有变化也不会触发onCompositionStartEnd事件

代码如下：

handleComposition = (e) => {
    console.log(e.type + ": " + e.target.value);
    if (e.type === 'compositionend') {
      // composition is end
      const value = e.target.value;
      this.setState({ isOnComposition: false },()=>{
        // this.handleFixedChange(value);
      });
    } else {
      // in composition
      this.setState({ isOnComposition: true });
    }
  }

  handleFixedChange = (inputValue)=>{
    console.log("onChange" + ": " + inputValue);
    //保存value
    this.informParentChange(inputValue);
   }

  <Input
    onChange={(e)=>this.handleFixedChange(e.target.value)}
    onCompositionStart = {this.handleComposition}
    onCompositionUpdate = {this.handleComposition}
    onCompositionEnd = {this.handleComposition}
    {...newProps}
    value={this.props.value}
  />

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!