javascript 基本 React JS - 表单提交按钮刷新整个页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50193227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Basic React JS - Form Submit Button Refreshes Entire Page
提问by Mike Smith Alexiss
Quick React question here: I'm trying to create an input form, have that stores information in the component's state variable, then outputs that variable on the screen. I read the docs on controlled components and that's what I'm attempting (albeit poorly) here. My main issue here is once I clicked submit, the correct text appears on the screen but then the entire thing refreshes and I'm not sure why. From what I've read online, refs appear to be another solution but my understanding is that I can either use that or I could either use controlled components. I realise it's a noob question so feel free to just link me to any documentation / previous examples that could help me out. Merci! (Also, sorry for any typos, English is not my native).
此处的快速反应问题：我正在尝试创建一个输入表单，将信息存储在组件的状态变量中，然后在屏幕上输出该变量。我阅读了有关受控组件的文档，这就是我在这里尝试的（尽管效果不佳）。我的主要问题是一旦我点击提交，正确的文本就会出现在屏幕上，但随后整个事情都刷新了，我不知道为什么。从我在网上阅读的内容来看，refs 似乎是另一种解决方案，但我的理解是我可以使用它，也可以使用受控组件。我意识到这是一个菜鸟问题，所以请随时将我链接到任何可以帮助我的文档/以前的示例。谢谢！（另外，对于任何错别字，抱歉，英语不是我的母语）。
class InputField extends React.Component {
constructor(props) {
super(props);
this.state = {
itemName: "",
storedItemName: "",
};
this.handleNameChange = this.handleNameChange.bind(this);
this.afterSubmission = this.afterSubmission.bind(this);
}
handleNameChange(event) {
this.setState({
itemName: event.target.value
});
}
afterSubmission(event) {
let name = this.state.itemName;
this.setState ({
storedItemName:this.state.itemName
}, function() {
alert(this.state.storedItemName); // Shows the right value!
});
}
render() {
return(
<div>
<form onSubmit = {this.afterSubmission}>
<label> Item Name:
<input
type = "text"
name = "itemName"
value = {this.state.itemName}
onChange = {this.handleNameChange}
/></label>
<input type = "submit" value = "Submit" />
</form>
<div className = "itemList">
<p>Hi</p>
{this.state.storedItemName}
</div>
</div>
);
}
回答by Prakash Sharma
Just call event.preventDefaultmethod to prevent default behavior of form
只需调用event.preventDefault方法即可防止表单的默认行为
afterSubmission(event) {
event.preventDefault();
let name = this.state.itemName;
this.setState ({
storedItemName:this.state.itemName
}, function() {
alert(this.state.storedItemName); // Shows the right value!
}
}
回答by Bhojendra Rauniyar
Prevent the default behaviour:
防止默认行为：
afterSubmission(event) {
event.preventDefault();
let name = this.state.itemName;
this.setState ({
storedItemName:this.state.itemName
}, function() {
alert(this.state.storedItemName); // Shows the right value!
});
}
