react onCompositionStart/Update/onCompositionStartEnd 触发时机_React

上一篇: react-router 路由切换动画下一篇:React实战篇（React仿今日头条）

react onCompositionStart/Update/onCompositionStartEnd 触发时机

发布时间：2019-06-22 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了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事件

代码如下：

      
      
      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);
   }

  this.handleFixedChange(e.target.value)}
    onCompositionStart = {this.handleComposition}
    onCompositionUpdate = {this.handleComposition}
    onCompositionEnd = {this.handleComposition}
    {...newPRops}
    value={this.props.value}
  />" title="" data-original-title="复制">
      
      
  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}
  />