Javascript 反应设置状态第一次未点火
我看到了类似的问题,但无法找到解决方案 我有一些输入,当你粘贴一些文本到输入,我试图设置它的状态,并呈现这个文本。但当第一次粘贴时,状态不会在第二次粘贴时改变,一切正常 我不明白为什么会发生这种情况,我已经使用了一些setTimeOut函数,但没有帮助 这是我的密码:Javascript 反应设置状态第一次未点火,javascript,reactjs,Javascript,Reactjs,我看到了类似的问题,但无法找到解决方案 我有一些输入,当你粘贴一些文本到输入,我试图设置它的状态,并呈现这个文本。但当第一次粘贴时,状态不会在第二次粘贴时改变,一切正常 我不明白为什么会发生这种情况,我已经使用了一些setTimeOut函数,但没有帮助 这是我的密码: import React from "react"; import { render } from "react-dom"; class App extends React.Component { constructor()
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
更新的基本上,您在firtsonpaste
调用时获得空状态的原因是onpaste
在输入值更改之前激发。因此,您将获得空的event.target.value
并且对于所有其他调用,您将获得以前的值
如果您仍然决定继续使用onpaste
,您应该记住,您可以使用event.clipboardData.getData('Text')
获得粘贴的值,但它可能与粘贴到输入中的值不同,因为对于不同的输入类型,clipboardData
的行为不同
因此,对于使用剪贴板数据,我建议使用来自的DataTransfer
模块,以在不同的系统和浏览器中获得更一致的行为。基本上,在firtsonpaste
调用中获得空状态的原因是,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不起作用,而不是建议其他方法?