屏幕上的React鍵盤不會觸發更改事件

Question

我創建了一個屏幕鍵盤（osk），可在信息亭樣式的React應用中使用。 osk可以正常工作，並將所需的文本等輸入到適當的元素中。 我的問題是，使用osk輸入文本不會觸發目標上的更改事件，因此永遠不會調用我的onChange處理程序。 我試圖用osk插入我的文本后嘗試觸發change事件，如下所示，但是，現有的onChange處理程序不會像使用鍵盤輸入文本時那樣被調用。 處理此問題的最佳“反應”方法是什么？ PS-我不使用jQuery。 謝謝！

//update element text from osk
this.props.target.value = (this.props.target.value + btnText);

//attempt to trigger change event
this.props.target.dispatchEvent(new Event('change'));

//input updated from osk
const ce = React.createElement;

ce("input", {
      id: "PasswordText",
      type: "password",
      data: "text",
      onClick: this.clickHandler,
      defaultValue: this.props.accessPassword,
      onChange:this.changeHandler})

//change handler
changeHandler(e) {
    this.setState({
        stateObject: e.target.value
    });
}

Answer 1

正如Mark指出的那樣，問題是由於React沒有監聽那些事件（或不信任它們）。

要觸發輸入事件，您必須編輯擴展：

• 查找系統上擴展存儲的目錄

• 使用您喜歡的編輯器打開script.js

• 找到virtualKeyboardChromeExtension_click函數，並在switch語句之后添加以下內容：

   function virtualKeyboardChromeExtension_click(key, skip) { [...] switch (key) { // <- find the switch statement [...] } // <- after the close brace add the following 4 lines code: var inputEvent = new Event('input', {bubbles:true}); if(typeof virtualKeyboardChromeExtensionClickedElem !== "undefined") { virtualKeyboardChromeExtensionClickedElem.dispatchEvent(inputEvent); } // you are done 

• 保存並重新加載擴展。

注意：如果您使用的是chrome，它將為您提供有關已修改和不受信任的擴展名的錯誤和警告。 但是，當您開發信息亭模式的應用程序時，我想您可以切換到Chrome，進入開發人員模式，並使用“ Load unpacked extension按鈕來加載修改后的擴展程序

Answer 2

Chrome的虛擬鍵盤擴展程序存在相同的問題。 在react的存儲庫中發現的一個問題上 ，react聽到了input事件，而不是實際的change事件。
在您的情況下，解決方案將是觸發此事件，就我而言，我選擇退出通用虛擬鍵盤，並尋找面向反應的解決方案（即，虛擬鍵盤react的庫）

有點晚了，但我希望這對其他人有所幫助。
干杯兄弟