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

Question

在 IE11/React 15.1.0 上，当 copy/paste 使用鼠标右键单击文本字段时，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 触发鼠标粘贴。

Answer 2

我在 Chrome 和 IE11 中遇到了不同的 onPaste 行为，在某些情况下，onChange 在 onPaste 事件之后有时不会被调用。

React 版本 17.0.1

下面是我的解决方案-

const [value, setValue] = useState("");

const callCommonOnchange = (v) => {
  // Do you in change operation to update input value
    setValue(v);
};
const handleChange = (e) => {
    callCommonOnchange(e.target.value);
};

const handlePaste = (e) => {
   //handle paste for some transformation
    If(condition)
        let paste = (e.clipboardData || window.clipboardData).getData("text");
        paste = paste.split("|").join(","); //transform your pasted content
        const selectionStart = e.target.selectionStart;

        const selectionEnd = e.target.selectionEnd;

        const currentValue = e.target.value;

        const startValue = currentValue.substring(0, selectionStart);
        const endValue = currentValue.substring(selectionEnd);

        callCommonOnchange(startValue + paste + endValue);
        e.preventDefault();
    else
        return;
};


return(
     <input value={value} onChange={handleChange} onPaste={handlePaste}/>
)

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

onChange not firing in React 15.1.0 + IE11 when paste text into text field

javascript

onchange

mouseevent

internet-explorer-11

reactjs

选项 1：

选项 2：