Javascript 反应设置状态第一次未点火

Javascript 反应设置状态第一次未点火,javascript,reactjs,Javascript,Reactjs,我看到了类似的问题,但无法找到解决方案 我有一些输入,当你粘贴一些文本到输入,我试图设置它的状态,并呈现这个文本。但当第一次粘贴时,状态不会在第二次粘贴时改变,一切正常 我不明白为什么会发生这种情况,我已经使用了一些setTimeOut函数,但没有帮助 这是我的密码: import React from "react"; import { render } from "react-dom"; class App extends React.Component { constructor()

我看到了类似的问题,但无法找到解决方案

我有一些输入,当你粘贴一些文本到输入,我试图设置它的状态,并呈现这个文本。但当第一次粘贴时,状态不会在第二次粘贴时改变,一切正常

我不明白为什么会发生这种情况,我已经使用了一些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"));
从“React”导入React;
从“react dom”导入{render};
类应用程序扩展了React.Component{
构造函数(){
超级();
此.state={
否:“
};
}
pasteSomeText=e=>{
这是我的国家({
否:e.target.value
});
};
render(){
返回(
{this.state.no}
this.pasteSomeText(事件)}/>
);
}
}
渲染(

使用

onChange
而不是使用

onPaste
更新的

使用

onChange
而不是使用

onPaste

更新的

基本上,您在firts
onpaste
调用时获得空状态的原因是
onpaste
在输入值更改之前激发。因此,您将获得空的
event.target.value
并且对于所有其他调用,您将获得以前的值

如果您仍然决定继续使用
onpaste
,您应该记住,您可以使用
event.clipboardData.getData('Text')
获得粘贴的值,但它可能与粘贴到输入中的值不同,因为对于不同的输入类型,
clipboardData
的行为不同


因此,对于使用剪贴板数据,我建议使用来自的
DataTransfer
模块,以在不同的系统和浏览器中获得更一致的行为。

基本上,在firts
onpaste
调用中获得空状态的原因是,
onpaste
在更改输入值之前触发。因此,您得到的是空的
event.target.value
对于所有其他调用,您将获得上一个值

如果您仍然决定继续使用
onpaste
,您应该记住,您可以使用
event.clipboardData.getData('Text')
获得粘贴的值,但它可能与粘贴到输入中的值不同,因为对于不同的输入类型,
clipboardData
的行为不同


因此,对于使用剪贴板数据,我建议使用
DataTransfer
module from,以在不同的系统和浏览器中获得更一致的行为。

要从事件中获取数据,请使用
e.clipboardData.getData('text')
。请参阅

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

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

旁注:对于HTML调用,您不需要使用此箭头函数(它使用更多内存),请参见上面的示例要从事件中获取数据,请使用
e.clipboardData.getData('text')
。请参阅

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

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

旁注:对于来自HTML的调用,您不需要使用此箭头函数(这会占用更多内存),请参见上面的示例。

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

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

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

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

使用
一旦更改
,粘贴行为仍将保持不变works@user3348410为什么使用onPaste而不是onChange方法?使用
onChange
而不是
onPaste
。更新了我们如何理解onPaste不起作用而不是建议其他方法的可能副本?使用
onChange
,粘贴行为我病了works@user3348410为什么要使用onPaste而不是onChange方法?使用
onChange
而不是
onPaste
。更新了可能的副本,我们如何理解为什么onPaste不起作用,而不是建议其他方法?