为什么提交表单会重置我的状态

Question

我正在做一个看板项目。它附带一个登录屏幕。我添加了一个按钮，我想用它来向棋盘添加新任务。然而，当我提交到该按钮时，它会将我的电子邮件状态重置为空白，这是我返回登录屏幕的条件。为什么？我该如何防止这种情况发生？如有任何建议，我们将不胜感激。

App.js

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
initialData,
email: this.props.email,
password: this.props.password,
showForm: false,
};
this.logOut = this.logOut.bind(this);

}
logOut() {
console.log("Logged out");
this.setState({ email: "", password: "" });
}
render() {
const { showForm } = this.state;
if (this.state.email == "") {
return <LogIn />;
} else {
{
//console.log(this.state);
}
return (
<DragDropContext onDragEnd={this.onDragEnd}>
<Container>
{this.state.initialData.columnOrder.map((columnId) => {
const column = this.state.initialData.columns[columnId];
const tasks = column.taskIds.map(
(taskId) => this.state.initialData.tasks[taskId]
);
return <Column key={column.id} column={column} tasks={tasks} />;
})}
</Container>
<button onClick={this.logOut}>Log Out</button>
<button onClick={() => this.hideComponent("showForm")}>
Create Task
</button>
<Container>
<div>
{showForm && <CreateForm onSubmit={(value) => alert(value)} />}
</div>
</Container>
</DragDropContext>
);
}
}
}

CreateForm.js

class CreateForm extends React.Component {
render() {
console.log("form");
return (
<form onSubmit={this.handleSubmit}>
<label>
Content:
<input type="text" />
</label>
<input type="submit" value="Submit" onSubmit={event => props.onSubmit(event.target.value)}/>
</form>
);
}
}
export default CreateForm;

Answer 1

handleSubmit(event) {
event.preventDefault(); // we need this for avoid your behavior
// your code
}