表单提交在React中立即恢复之后的状态更改[重复]
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了表单提交在React中立即恢复之后的状态更改[重复]相关的知识,希望对你有一定的参考价值。
这个问题在这里已有答案:
我有一个简单的反应应用程序,列出州的用户。代码如下:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
state = {
users : [
{ name:'Ramu', age:23 },
{ name:'Somu', age:34 },
{ name:'Bheemu', age:45 }
]
};
addUser = (user, e) => {
let users = Object.assign([], this.state.users);
users.push(user)
this.setState({
users : users
})
}
render() {
return (
<div className="App">
<ul>
{
this.state.users.map((user, index) => {
return (<div>
{ user.name } | {user.age}
</div>)
})
}
</ul>
<form onSubmit={this.addUser.bind(this, { name:'Sita', age:21 })}>
<label>
Name:
<input type="text"/>
</label>
<label>
Age:
<input type="text" />
</label>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
export default App;
在提交表单时,用户会被添加,但会立即重新加载页面,新用户将从状态中删除。为什么删除新用户?
答案
您需要阻止默认浏览器表单提交。在e.preventDefault()
方法中添加addUser
。默认浏览器表单提交重新加载该页面,因此新的<App />
组件将以其初始状态创建,并且您将丢失新数据。
以上是关于表单提交在React中立即恢复之后的状态更改[重复]的主要内容,如果未能解决你的问题,请参考以下文章
React Hooks:使用useState更新状态不会立即更新状态[重复]