javascript - 将文本粘贴到文本字段时，onChange 不会在 React 15.1.0 + IE11 中触发

Question

在 IE11/React 15.1.0 上，当使用鼠标右键单击将数据复制/粘贴到文本字段时，onChange 不会触发，这在 Chrome 和 Firefox 中工作正常。

为了解决这个问题，我在输入字段中使用了 onBlur 和 onChange，但我知道这不是正确的方法。

<input name="username" onChange={this.props.updateName} 
       onBlur={this.props.updateName} id="username" /> 

我找到了一个 similar discussion on Github但修复是在更高版本的 15.6.0 中进行的，但我无法更新 React 的版本，因为它可能会破坏应用程序。

Answer 1

选项 1:

切换到 React 15.6.2(React 15.x 的最新版本)，在 IE11 上没有这个问题；通过鼠标粘贴仍然会触发 change:

ReactDOM.render(
  <div>
    <input
      text="text"
      onInput={() => {
        console.log("input");
      }}
      onChange={() => {
        console.log("change");
      }}
    />
  </div>,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

选项 2:

响应 input 而不是 change 或者除了 change 之外。正如我们在这里看到的，当您在 IE11 上通过鼠标粘贴时，15.1.0 不会触发 onChange 处理程序:

ReactDOM.render(
  <div>
    <input
      text="text"
      onInput={() => {
        console.log("input");
      }}
      onChange={() => {
        console.log("change");
      }}
    />
  </div>,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.1.0/react-dom.min.js"></script>

在 IE11 上，使用鼠标粘贴仅触发 input。