反应屏幕键盘不触发更改事件

Question

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

The problem, as Mark point, is due to React not listening to those events (or not trusting them).

To trigger the input event, you have to edit the Extension:

• Find the dir where the extension is stored on your system

• Open script.js with your favorite editor

• Find the virtualKeyboardChromeExtension_click function and add the following after the switch statement:

  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
  

• Save and reload the extension.

NOTE: If you are using chrome it will give you errors and warnings about modified and untrusted extension. But as you are developing a kiosk mode app I suppose you can switch to chromium, enter developer mode and use the Load unpacked extension button to load your modified extension