Я изучаю Реакт. Я сделал форму, используя 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;
Я не могу определить, почему моя страница перезагружается после отправки. Что мне делать, чтобы данные моей формы не исчезли из консоли?
Сделайте свою функцию отправить обработчик такой:
onSubmitHandler=(e)=>{
e.preventDefault()
alert("Content: "+ this.state.content+" Category: "+ this.state.category);
}
Функция предотвращениепо умолчаниюпредотвращает действие По умолчаниюперезарядка веб-сайта после отправки формы.
Отвечает ли это на ваш вопрос? stackoverflow.com/questions/50193227/…