javascript - react 屏幕键盘不触发更改事件

Question

我创建了一个屏幕键盘(osk)，用于 kiosk 风格的 React 应用程序。 osk 按其应有的方式工作，并将所需的文本等输入到适当的元素中。我的问题是，使用 osk 输入文本不会触发目标上的更改事件，因此我的 onChange 处理程序永远不会被调用。我尝试在使用 osk 插入文本后触发更改事件，如下所示，但是，我现有的 onChange 处理程序不会像使用键盘输入文本时那样被调用。处理这个问题的最佳“ react ”方式是什么？ 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

正如马克指出的那样，问题是由于 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，它会向您提供有关已修改和不受信任的扩展的错误和警告。但是当您正在开发信息亭模式应用程序时，我想您可以切换到 chromium，进入开发人员模式并使用加载解压的扩展按钮加载修改后的扩展