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

Question

我试图建立一个简单的todo应用程序，但当我点击提交输入的形式页面刷新，从输入的所有数据被擦除或丢失，我不确定。

控制台日志出现一秒钟，然后在刷新后消失。数组与列表的待办事项似乎得到填充的输入，但刷新后它消失;至少这是我的理解。

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

Answer 1

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

在这种情况下，看起来您在handleSubmit方法中有一个错字。event.preventDefualt()应该是event.preventDefault()(defaultvsdefault)。

Answer 2

您在event. preventdefault()中有一个错别字。应该是event.preventDefault()。