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：

＆＃13;

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

＆＃13;

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

＆＃13;

选项2：

代替input，而不是change。正如我们在这里看到的，当你在IE11上通过鼠标粘贴时，15.1.0不会触发onChange处理程序：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

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

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中触发

2 个答案:

选项1：

选项2：