如何在我提交表单后使我的表单数据显示在控制台上

Question

我正在学习React。我使用react bootstrap制作了表格。当我提交表单时，我正试图输出在表单中输入的数据以显示在控制台上。提交表单后，数据会显示一小段时间，但随后页面会重新加载，控制台变为空白。

这是我的代码

import React, { Component } from 'react';
import classes from './Admin.css';
import { Form, Button, Container } from 'react-bootstrap';
class Admin extends Component {
state = {
content: null,
category: null
}

onChangeContentHandler = (event) => {
this.setState({ content: event.target.value });
}
onChangeCategoryHandler = (event) => {
this.setState({ category: event.target.value });
}
onSubmitHandler=()=>{
alert("Content: "+ this.state.content+"    Category: "+ this.state.category);
}

render() {
return (
<Container className={classes.Body}>
<Form onSubmit={this.onSubmitHandler}>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Content</Form.Label>
<Form.Control type="text" 
placeholder="Enter content" 
onChange={this.onChangeContentHandler}/>

</Form.Group>

<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Category</Form.Label>
<Form.Control type="text" 
placeholder="Enter category" 
onChange={this.onChangeCategoryHandler}/>
</Form.Group>

<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</Container>
);
}
}
export default Admin;

我无法检测为什么我的页面在提交时重新加载。我应该怎么做才能不让我的表单数据从控制台中消失？

Answer 1

使submitHandler函数如下：

onSubmitHandler=(e)=>{
e.preventDefault()
alert("Content: "+ this.state.content+"    Category: "+ this.state.category);
}

preventDefault功能阻止表单提交后重新加载网站的默认操作。