資訊專欄INFORMATION COLUMN
摘要：環境在使用的控件時由于控制了輸入字符串的長度，導致在輸入漢字時不能正確輸入。原因在事件中不能準確獲得輸入的文字字符串，如果使用輸入法輸入漢字，會被識別為一連串英文字符串。三個事件的觸發時間分別為輸入開始時，輸入進行中，和輸入完成時。
環境
在使用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}
/>
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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 內部機制和實現原...
閱讀 2781·2023-04-25 14:41
閱讀 2375·2021-11-23 09:51
閱讀 3674·2021-11-17 17:08
閱讀 1667·2021-10-18 13:31
閱讀 5528·2021-09-22 15:27
閱讀 910·2019-08-30 15:54
閱讀 2222·2019-08-30 13:16
閱讀 728·2019-08-29 17:04
