react onCompositionStart/Update/onCompositionStartEnd 触发时机

前端之家收集整理的这篇文章主要介绍了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}
  />
原文链接:https://www.f2er.com/react/301887.html

猜你在找的React相关文章