4

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

在以下代码段中，如果您将“奶酪”一词复制到剪贴板并针对以下两种情况重新运行该代码段：

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

在这两种情况下，记录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事件处理程序中获取修改后的值（或值将变为什么）？

4

0 回答 0