表单提交在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更新状态不会立即更新状态[重复]

使用保存和取消选项编辑表单

表单重复提交的可行办法

通过 onSubmit 在 React 中更改表单的 CSS 样式

表单输入的值在 React 中提交时未更新

React.js:在更改状态的输入字段中单击取消时如何返回先前的状态值[重复]