Question

我们有一个相对简单的React组件，其中包含一个input元素：

export class MyInput extends Component {
  componentDidMount() {
    function log(e) {
      console.log(`Event: ${e.type}, isTrusted: ${e.isTrusted}, input value: ${e.target.value}`, e);
    }

    this.rawInput.addEventListener("change", log);
    this.rawInput.addEventListener("input", log);
  }

  onChanged(e) {
    console.log("raw-input.onChanged: e.target.value", e.target.value);

    this.props.onChanged(e.target.value);
  }

  render() {
    return (
      <div className="my-class">
        <input
          value={this.props.value}
          onChange={this.onChanged.bind(this)}
          ref={(input) => { this.rawInput = input; }}
          />
      </div>
    );
  }
}

基本上，这只是一个稍微包裹的input元素，而添加在顶部的日志记录则是为了调试。

它可以正常处理键入，还可以处理Chrome，Firefox和IE 11中的Selenium WebDriver下的SendKeys（前提是WebDriver的EnableNativeEvents是true）。

但是，当WebDriver在Internet Explorer 11中运行EnableNativeEvents = false时，执行onChanged时不会触发SendKeys事件。最奇怪的是触发了HTML input事件。下面是控制台输出：

请注意，在键入“ test”时输入的value发生了变化，但是没有onChange。

以下是WebDriver展开的input事件：

如果用户随后通过键盘在同一输入中键入，则onChange事件在那里：

以下是用户输入时展开的input事件：

紧密分析显示，input事件的唯一区别是在WebDriver isTrusted: false下，而在实际键入isTrusted: true下。

问题是为什么在第一种情况下onChange事件不会被React触发？

我认为这是因为React跳过带有isTrusted: false的事件，因为这意味着它们是模拟的，而不是真实的用户事件。但是，我找不到任何证明。如果是这种情况，您介意在React源中提供指向该帖子的链接或一行吗？

反应：16.7.0
Selenium.WebDriver.IEDriver：3.14.0

Answer 1

将nativeEvents功能设置为false（这是使用EnableNativeEvents属性设置的功能）时，您正在告诉IE驱动程序使用JavaScript来模拟事件。通过JavaScript模拟的事件 cannot have the isTrusted property set to true。该属性旨在准确检测您遇到的情况。 Firefox和Chrome的驱动程序实现是由供应商为那些浏览器（分别为Mozilla和Google）生产和维护的，因此，这些驱动程序可以以IE驱动程序无法访问（并且很可能永远不会）的方式访问浏览器的内部。将）。如果React实际上确实是通过触发该属性来触发onChanged事件，那么这里要做的正确的事情就是设置EnableNativeEvents = true。

为什么在IE 11中Selenium WebDriver的SendKeys上不会触发React的onChange事件？

1 个答案: