Как сделать, чтобы данные моей формы отображались в консоли после отправки формы?

Я изучаю Реакт. Я сделал форму, используя 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;

Я не могу определить, почему моя страница перезагружается после отправки. Что мне делать, чтобы данные моей формы не исчезли из консоли?

Отвечает ли это на ваш вопрос? stackoverflow.com/questions/50193227/…

Peter 20.03.2022 10:30
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
37
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сделайте свою функцию отправить обработчик такой:

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

    }

Функция предотвращениепо умолчаниюпредотвращает действие По умолчаниюперезарядка веб-сайта после отправки формы.

Другие вопросы по теме