如何在提交表单后阻止 React App 重置所有内容答案

【问题标题】：How do Is stop React App from resetting everything after submit form如何在提交表单后阻止 React App 重置所有内容
【发布时间】：2021-01-27 14:39:46
【问题描述】：

我正在尝试构建一个简单的待办事项应用程序，但是当我在表单的输入上单击提交时，页面刷新并且输入中的所有数据都被删除或丢失，我不确定。

控制台日志会出现片刻，然后在刷新后消失。带有待办事项列表的数组似乎充满了输入，但刷新后它消失了；或者至少这是我的理解。

import React from "react"
import './App.css'
import TodoList from './components/TodoList.js'


class App extends React.Component {
  state = {
    count:0
  }

  increment = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  decrement = () => {
    this.setState({
      count: this.state.count -1
    })
  }

  render(){
    return(
      <div className="App">
      <TodoList/> 
      
      </div>
    )
  }
}

export default App

import React from "react"
import TodoForm from "./TodoForm"

export default class TodoList extends React.Component {

    state = {
        todos: []
    };

    addTodo = (todo) => {
        this.setState({
            todos: [todo]
        });

    };

    render() {
        return (
        <div>
        <TodoForm onSubmit={this.addTodo}/>
        {JSON.stringify(this.state.todos)}



        </div>
        );
    }
}

import React from "react"
import shortid from "shortid"

class TodoForm extends React.Component {

    state = {
        text: ""
    }

    handleChange = (event) =>{
        this.setState({
            [event.target.name]: event.target.value
        })

    }

    handleSubmit = (event) => {
        event.preventDefualt() 
        this.props.onSubmit({
            id: shortid.generate(),
            text: this.state.text,
            complete: false   
        })
        
        
    }
    

    render() {
        return (
        <div>
        <form onSubmit={this.handleSubmit} >
            <input
            name="text" 
            value={this.state.text} 
            placeholder="todo..." 
            onChange={this.handleChange}
            />
        </form>
        </div>
        )
    }
}

export default TodoForm

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

默认情况下，提交表单会重新加载整个页面。为避免这种情况，您应该在 onSubmit 方法中调用 event.preventDefault()。

在这种情况下，您似乎在 handleSubmit 方法中有错字。 event.preventDefualt() 行应该是 event.preventDefault()（默认 vs 默认）。

【讨论】：

【解决方案2】：

您在 event.preventDefualt() 中有错字。应该是 event.preventDefault()。

【讨论】：

欢迎来到 StackOverflow。我建议不要回答，除非您确切知道如何解决或正确回答所要求的内容，当您获得更多声誉时，您可以发表评论，在这种情况下，您的回答通常会更好地作为澄清等的评论. 我告诉你这个是为了避免你投反对票！看看这里 --> comment everywhere