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

问题，正如Mark所说，是由于React没有收听这些事件（或者不信任它们）。

要触发输入事件，您必须编辑扩展名：

找到扩展程序存储在系统中的目录
使用您喜欢的编辑器打开while (true) { tx = db.new_transaction() job_id, param1, param2 = tx.query("select * from queue for update skip locked limit 1") try { some_long_processing(param1, param2) tx.commit() } catch { tx.rollback() } }
找到script.js函数并在switch语句后添加以下内容：
```
virtualKeyboardChromeExtension_click
```
保存并重新加载扩展程序。

注意：如果您使用的是Chrome，则会向您提供有关已修改和不受信任的扩展程序的错误和警告。但是，当您正在开发自助服务终端模式应用程序时，我想您可以切换到铬，进入开发者模式并使用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按钮加载修改后的扩展程序

Answer 2

我的Chrome虚拟键盘扩展程序存在同样的问题。在an issue in react's repository上找到反应意外的input事件，而不是实际的change事件。
在你的情况下，解决方案是触发此事件，在我的情况下，我选择退出通用虚拟键盘并寻找更加面向反应的解决方案（即虚拟键盘反应库）</ p>

有点晚了，但我希望这有助于其他人干杯兄弟

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

2 个答案: