reactjs - 为什么在 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 .

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

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

• 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。