資訊專欄INFORMATION COLUMN
摘要：環(huán)境在使用的控件時由于控制了輸入字符串的長度，導致在輸入漢字時不能正確輸入。原因在事件中不能準確獲得輸入的文字字符串，如果使用輸入法輸入漢字，會被識別為一連串英文字符串。三個事件的觸發(fā)時間分別為輸入開始時，輸入進行中，和輸入完成時。
環(huán)境
在使用antd的Input控件時由于控制了輸入字符串的長度，導致在輸入漢字時不能正確輸入。
原因：在OnChange事件中不能準確獲得輸入的文字字符串，如果使用輸入法輸入漢字，
會被識別為一連串英文字符串。
三個事件的觸發(fā)時間分別為：輸入開始時，輸入進行中，和輸入完成時。需要注意
前2個事件都在onChange之前觸發(fā)，onCompositionEnd是在onChange之后觸發(fā)。
另外如果直接輸入完成是不會觸發(fā)這三個事件的，只有onChange事件。比如直接輸入英文。如果input的value沒有變化也不會觸發(fā)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}
/>
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93011.html
摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅持每天花分鐘來學習與思考。 今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點，受到很多朋友的關注，都強烈要求再出多些React相前的面試題，受到大家的邀請，我又找了20多個React的使用者，他們給出了328道React的面試題，由我整理好發(fā)給大家，同時發(fā)布在了前端面試每日3+1的React專題，希望對大家有所幫助，同時大...
摘要：中的元素組件實例和節(jié)點，是中關系密切的個概念，也是很容易讓初學者迷惑的個概念。組件和元素關系密切，組件最核心的作用是返回元素。只有組件實例化后，每一個組件實例才有了自己的和，才持有對它的節(jié)點和子組件實例的引用。 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。 React 中的元素、組件、實...
摘要：中的元素組件實例和節(jié)點，是中關系密切的個概念，也是很容易讓初學者迷惑的個概念。組件和元素關系密切，組件最核心的作用是返回元素。只有組件實例化后，每一個組件實例才有了自己的和，才持有對它的節(jié)點和子組件實例的引用。 文：徐超，《React進階之路》作者授權發(fā)布，轉(zhuǎn)載請注明作者及出處 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解...
摘要：在前端開發(fā)過程中，源碼解讀是必不可少的一個環(huán)節(jié)，我們直接進入主題，注意當前版本號。注意包文件僅僅是的必要的功能性的定義，它必須要結(jié)合一起使用下是，原生環(huán)境下是。 在前端開發(fā)過程中，源碼解讀是必不可少的一個環(huán)節(jié)，我們直接進入主題，注意當前 React 版本號 16.8.6。 注意：react 包文件僅僅是 React components 的必要的、功能性的定義，它必須要結(jié)合 React...
摘要：內(nèi)部機制探秘和文末附彩蛋和源碼這篇文章比較偏基礎，但是對入門內(nèi)部機制和實現(xiàn)原理卻至關重要。當然也需要明白一些淺顯的內(nèi)部工作機制。當改變出現(xiàn)時，相比于真實更新虛擬的性能優(yōu)勢非常明顯。直到最終，會得到完整的表述樹的對象。 React 內(nèi)部機制探秘 - React Component 和 Element（文末附彩蛋demo和源碼） 這篇文章比較偏基礎，但是對入門 React 內(nèi)部機制和實現(xiàn)原...
閱讀 2796·2023-04-25 14:41
閱讀 2404·2021-11-23 09:51
閱讀 3690·2021-11-17 17:08
閱讀 1682·2021-10-18 13:31
閱讀 5569·2021-09-22 15:27
閱讀 923·2019-08-30 15:54
閱讀 2235·2019-08-30 13:16
閱讀 743·2019-08-29 17:04
