解决 input 输入框在中文输入法下的 bug |
您所在的位置：网站首页 › mac电脑中文输入法失效 › 解决 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 onChange if (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 { width: '100%', border: '0.1px solid #e8e8e8', outlineColor:'#e8e8e8' }} {...commonProps} /> } } ControlledInput.propTypes = { onChange: PropTypes.func }; ControlledInput.defaultProps = { onChange: () => { } }; export default ControlledInput;各位看官，在下也不想装逼，实则有人已对此问题做过详细描述了，看在各位已经看过本山人文章的份上，就透露给大家吧，以表各位一览之恩：解决 React 中的 input 输入框在中文输入法下的 bug |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |