Question

我看到了类似的问题，但无法解决。

当您将一些文本粘贴到输入中时，我有一些输入，我试图将其设置为陈述并呈现此文本。但是，在第一次粘贴状态下，第二次粘贴时一切都不会改变。

我不明白为什么会发生这种情况，我已经为此使用了一些setTimeOut函数，但没有帮助。

这是我的代码：

import React from "react";
import { render } from "react-dom";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      no: ""
    };
  }

  pasteSomeText = e => {
    this.setState({
      no: e.target.value
    });
  };

  render() {
    return (
      <div style={styles}>
        {this.state.no}
        <input onPaste={event => this.pasteSomeText(event)} />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

这是codeSandBox示例：https://codesandbox.io/s/1-react-hello-world-tvscf?fontsize=14

Answer 1

基本上，您在static string GetFrameworkName() => ((System.Runtime.Versioning.TargetFrameworkAttribute) (System.Reflection.Assembly.GetEntryAssembly() .GetCustomAttributes(typeof(System.Runtime.Versioning.TargetFrameworkAttribute), true)[0])) .FrameworkName; // Example: .NETCoreApp,Version=v3.0调用时获得空状态的原因是，onpaste在更改输入值之前被触发。因此，您将得到空的onpaste，对于所有其他呼叫，您将获得先前的值。

如果您仍然决定继续使用event.target.value，则应牢记您可以使用onpaste粘贴值，但是由于操作的不同，它可能与粘贴的内容有所不同。 event.clipboardData.getData('Text')用于不同的输入类型。

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types

因此，对于处理剪贴板数据，我建议使用https://www.npmjs.com/package/fbjs中的clipboardData模块，以在不同的系统和浏览器中获得更一致的行为。

Answer 2

要从事件中获取数据，请使用e.clipboardData.getData('text')。参见https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event

e.target.value在使用粘贴数据更新之前为您提供文本字段的值，因此您可以根据需要取消/修改粘贴。

  pasteSomeText(e) {
    this.setState({
      no: e.clipboardData.getData('text')
    });
  };

旁注：通过HTML进行调用，您无需使用此箭头功能（使用更多的内存），请参见上面的示例

Answer 3

这是一种不同的事件，您需要从事件中获取剪贴板数据并将其设置为状态

const value = e.clipboardData.getData('text')

Answer 4

使用

onChange

代替

onPaste

更新了https://codesandbox.io/s/1-react-hello-world-h2jgv

反应setState第一次不触发

4 个答案: