Отправка формы обновляет страницу и не отправляет в базу данных MongoDb - PullRequest
Новая
       39

Отправка формы обновляет страницу и не отправляет в базу данных MongoDb

0 голосов
/ 10 июля 2020

Проблема 1: Содержимое не отображается после последнего оператора Else в файле index.jsx для формы, его исправление приведет к удалению последнего оператора Else, но это приведет к другой проблеме .

Проблема 2: После нажатия кнопки «Отправить» в почтовой форме страница обновляется, но ничего не отображается ни в базе данных, ни в сообщении, которое отправлено успешно.

i Надеюсь, кто-нибудь может мне помочь. Нет сообщений об ошибках в консоли

Вот все файлы: index.jsx (mail): 

import React, { Component } from "react";
import * as mailActions from "../../store/actions/mail";
import { connect } from "react-redux";
import Loader from "../Loader";
import TextField from "@material-ui/core/TextField";
import SendIcon from "@material-ui/icons/Send";
import AddIcon from "@material-ui/icons/Add";
import "./style.css";

class CreateMail extends Component {
  state = {
    createMail: false,
  };

  createMailHandler = () => {
    this.setState((prevState) => {
      return {
        createMail: !prevState.createMail,
      };
    });
  };
  render() {
    let content;

    if (this.props.loading) {
      content = <Loader />;
    } else if (this.props.error) {
      content = (
        <div>
          {this.props.errorMessages.map((error, i) => (
            <p key={i}>{error}</p>
          ))}
        </div>
      );
    } else if (this.props.mailSent) {
      content = <p>Mail sent successfully!</p>;
    } else {
      content = (
        <form className="createMailForm">
          <div className="formControl">
            <TextField
              id="receiver"
              label="Receiver"
              type="text"
              name="receiver"
              placeholder="Username of receiver"
            />
          </div>
          <div className="formControl">
            <TextField
              label="Subject"
              type="text"
              name="subject"
              placeholder="Subject"
              id="subject"
            />
          </div>
          <div className="formControl">
            <TextField id="body" label="Body of the Mail" multiline rows={6} />
          </div>
          <button className="createMailSendBtn">
            <SendIcon />
          </button>
        </form>
      );
    }
    return (
      <>
        <div className="createMailContainer" onClick={this.createMailHandler}>
          <button className="createMailCreateBtn">
            <AddIcon
              className={`${
                this.state.createMail ? "createMailCreateBtn--close" : ""
              }`}
            />
          </button>
        </div>
        <div
          className={`createMailFormContainer ${
            this.state.createMail
              ? "formContainer--visible"
              : "formContainer--hidden"
          }`}
        >
          {content}
        </div>
      </>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    ...state.mail,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    mailInit: (mailObj) => dispatch(mailActions.mailInit(mailObj)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(CreateMail);

1 Ответ

1 голос
/ 10 июля 2020

Ваша Проблема 2 из-за этого: 

<form className="createMailForm">

вы должны передать здесь метод обработчика отправки, и этот метод должен содержать отправку формы, например: 

<form className="createMailForm" onSubmit={this.submitHandler}>

и 

submitHandler = (e) => {
  e.preventDefault();
  // Now perform your action here like make api call or call some action etc
}
...