摘要：环境在使用的控件时由于控制了输入字符串的长度，导致在输入汉字时不能正确输入。原因在事件中不能准确获得输入的文字字符串，如果使用输入法输入汉字，会被识别为一连串英文字符串。三个事件的触发时间分别为输入开始时，输入进行中，和输入完成时。
环境
在使用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);
}
this.handleFixedChange(e.target.value)}
onCompositionStart = {this.handleComposition}
onCompositionUpdate = {this.handleComposition}
onCompositionEnd = {this.handleComposition}
{...newProps}
value={this.props.value}
/>
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93011.html
摘要：希望大家在这浮夸的前端圈里，保持冷静，坚持每天花分钟来学习与思考。 今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点，受到很多朋友的关注，都强烈要求再出多些React相前的面试题，受到大家的邀请，我又找了20多个React的使用者，他们给出了328道React的面试题，由我整理好发给大家，同时发布在了前端面试每日3+1的React专题，希望对大家有所帮助，同时大...
摘要：中的元素组件实例和节点，是中关系密切的个概念，也是很容易让初学者迷惑的个概念。组件和元素关系密切，组件最核心的作用是返回元素。只有组件实例化后，每一个组件实例才有了自己的和，才持有对它的节点和子组件实例的引用。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 React 中的元素、组件、实...
摘要：中的元素组件实例和节点，是中关系密切的个概念，也是很容易让初学者迷惑的个概念。组件和元素关系密切，组件最核心的作用是返回元素。只有组件实例化后，每一个组件实例才有了自己的和，才持有对它的节点和子组件实例的引用。 文：徐超，《React进阶之路》作者授权发布，转载请注明作者及出处 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解...
摘要：在前端开发过程中，源码解读是必不可少的一个环节，我们直接进入主题，注意当前版本号。注意包文件仅仅是的必要的功能性的定义，它必须要结合一起使用下是，原生环境下是。 在前端开发过程中，源码解读是必不可少的一个环节，我们直接进入主题，注意当前 React 版本号 16.8.6。 注意：react 包文件仅仅是 React components 的必要的、功能性的定义，它必须要结合 React...
摘要：内部机制探秘和文末附彩蛋和源码这篇文章比较偏基础，但是对入门内部机制和实现原理却至关重要。当然也需要明白一些浅显的内部工作机制。当改变出现时，相比于真实更新虚拟的性能优势非常明显。直到最终，会得到完整的表述树的对象。 React 内部机制探秘 - React Component 和 Element（文末附彩蛋demo和源码） 这篇文章比较偏基础，但是对入门 React 内部机制和实现原...
阅读 2780·2023-04-25 14:41
阅读 2375·2021-11-23 09:51
阅读 3673·2021-11-17 17:08
阅读 1666·2021-10-18 13:31
阅读 5528·2021-09-22 15:27
阅读 909·2019-08-30 15:54
阅读 2221·2019-08-30 13:16
阅读 727·2019-08-29 17:04
