Question

我在React应用程序中处理onPaste事件。我遇到的问题是，在粘贴事件完成之后，元素的value才会更新，因此我无法确定粘贴的数据是否覆盖现有的值或扩展对现有值。

在下面的代码段中，如果您将“cheese”一词复制到剪贴板中，并为以下两种情况重新运行代码段：

将一词粘贴到现有值的末尾，使其变为“123cheese”。
将一词粘贴到现有值上，使其成为“奶酪”。

在两者中，记录的value将等于“123”，并且仅凭value属性无法确定值的变化情况。

class Example extends React.Component {
  handlePaste(e) {
    const clipboardData = e.clipboardData.getData('text');
    const value = e.target.value;
    
    console.log("Pasted:", clipboardData);
    console.log("Value:", value);
  }
  
  render() {
    return <input defaultValue="123" onPaste={this.handlePaste.bind(this)} />;
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('example')
)

<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="example"></div>
<p>tl;dr: Please refer to the instructions above the snippet.</p>

现在我很清楚，一个潜在的解决方案是延迟我想要在处理程序中执行的代码，直到事件结束后，但这会让人感到烦恼和不必要：

class Example extends React.Component {
  handlePaste(e) {
    const clipboardData = e.clipboardData.getData('text');
    ((target) => {
      setTimeout(() => {
        const value = target.value;
    
        console.log("Pasted:", clipboardData);
        console.log("Value:", value);
      }, 100)
    })(e.target);
  }
  
  render() {
    return <input defaultValue="123" onPaste={this.handlePaste.bind(this)} />;
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('example')
)

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

如何在onPaste事件处理程序中获取修改后的值（或值将变为什么）？

如何在onPaste事件中获取输入字段的修改值？

0 个答案: