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事件

clipboard.png
代码如下:

  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}
  />
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值