解决 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 onChangeif (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 <inputref={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

解决 input 输入框在中文输入法下的 bug相关推荐

解决React中input输入框在中文输入法下的bug
解决React 中input 输入框在中文输入法下的bug 需求:封装Input 组件,输入拼音过程中不触发onChange,拼音输入结束后触发onChange 原理:input 标签上面有两个事件, ...
react根据中文获取拼音_解决 React 中的 input 输入框在中文输入法下的 bug
以下会涉及到的技术点:react mobx compositionstart compositionupdate compositionend 问题描述在使用 input 时,通常会对输入的内容做校 ...
解决oninput事件在中文输入法下会取得拼音的值的问题
在做搜索等功能时,很多时候我们需要实时获取用户输入的值,而常常会得到类似 w'm 这样的拼音.为了解决这个问题,我在网上搜索了下相关问题,发现了两个陌生的事件:compositionstart 和 c ...
ios 中文输入法完成事件_compositionEnd 和 input 事件（中文输入法问题）
网上用 compositionstart + compositionend + input 解决中文输入法问题的办法 node.addEventListener('compositionstart', ...
vue中模糊搜索keyup在中文输入法下输入英文无效的解决方法
keyup事件在中文输入法下输入英文,vue中对应的val属性值为空.控制台显示并没有获取到任何值,但是input中确实有字母.纳尼?说好的双向绑定呢? 要解决这个问题可以采用watch+keyup事 ...
如何解决input输入框只输入数字
如何解决input输入框只输入数字在做一些手机号.验证码登录的时候,一般都会对input框的输入进行限制,手机号只能是数字,以后有三种方式: onkeyup = "value=value. ...
python导入包的输入法_python使用idle edit编辑器时，中文输入法下遇到r、p、t、y时产生热键冲突...
python使用idle edit编辑器时,中文输入法下遇到r.p.t.y时产生热键冲突 229 2020-08-25 10:03 半年之后再来看当初写的文章,早已"情随事迁",就 ...
wps linux 中文ibus,解决wps for linux 中文输入法光标不跟随的问题
需要安装qt4-qtconfig和ibus-qt4,安装ibus-qt4之后才能在qt4-qtconfig"界面"选项卡默认输入法选项中看到ibus,选定它,然后设置XIM输入风格 ...
移动端，input输入框被手机输入法解决方案
移动端,input输入框被手机输入法解决方案参考文章: (1)移动端,input输入框被手机输入法解决方案 (2)https://www.cnblogs.com/liuhappy/p/8809149 ...

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

解决 input 输入框在中文输入法下的 bug相关推荐

最新文章

热门文章