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

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 时，在执行 SendKeys 时不会触发 onChanged 事件。最奇怪的是触发了 HTML input 事件。下面是控制台输出：

请注意，输入的 value 在输入“test”时发生变化，但没有 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。