React Form - Показать сообщение, если оно успешно введено в базу данных (MongoDB) - PullRequest
Новая
       5

React Form - Показать сообщение, если оно успешно введено в базу данных (MongoDB)

0 голосов
/ 11 сентября 2018

Извините, я уверен, что на этот вопрос был дан ответ, прежде чем я провел несколько поисков и не смог его найти.

Я просто пытаюсь найти способ отправить форму, иполучить ответ «Успешно отправлено ваше сообщение» пользователю и очистить форму.

Я сделал небольшую форму, чтобы упростить ее - любая помощь будет принята с благодарностью.

** Редактировать- В тот момент, когда вы нажимаете кнопку «Отправить», все правильно отправляется в MongoDB, но на стороне клиента ничего не происходит.Хотелось бы что-то показать, что данные действительно были добавлены

form.js Компонент 

import React, { Component } from 'react';
import {
  Button,
  Form,
  FormGroup,
  Label,
  Input
} from 'reactstrap';
import { connect } from 'react-redux';
import { addItem } from '../actions/itemActions';

class Register extends Component {
  state = {
    name: '',
    email: ''
  };

  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  onSubmit = e => {
    e.preventDefault();

    const newItem = {
     name: this.state.name,
    email: this.state.email
   };

  this.props.addItem(newItem);

  this.setState({
  name: "",
  email: ""
  });

 };

 render() {
   return (
      <div>

        <Form onSubmit={this.onSubmit}>
          <FormGroup>
          <Label for="item">Name</Label>
            <Input
              type="text"
              name="name"
              id="item"
              placeholder="Full Name"
              onChange={this.onChange}
            />
            <Label for="email">Email</Label>
            <Input
              type="text"
              name="email"
              id="item"
              placeholder="Email"
              onChange={this.onChange}
            />
            <Button color="dark" style={{ marginTop: '1rem' }} block>
              Register
               </Button>
              </FormGroup>
           </Form>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  item: state.item
});

export default connect(
  mapStateToProps,
  { addItem }
)(Register);

ItemActions.js 

import axios from 'axios';
import { GET_ITEMS, ADD_ITEM, ITEMS_LOADING } from './types';

export const getItems = () => dispatch => {
  dispatch(setItemsLoading());
  axios.get('/api/items').then(res =>
    dispatch({
      type: GET_ITEMS,
      payload: res.data
    })
  );
};

export const addItem = item => dispatch => {
  axios.post('/api/items', item).then(res =>
    dispatch({
      type: ADD_ITEM,
      payload: res.data
    })
  );
};

/* If I wanted to include a delete item request

export const deleteItem = id => dispatch => {
  axios.delete(`/api/items/${id}`).then(res =>
    dispatch({
      type: DELETE_ITEM,
      payload: id
    })
  );
};*/

export const setItemsLoading = () => {
  return {
    type: ITEMS_LOADING
  };
};

items.js 

const express = require('express');
const router = express.Router();

// Item Model
const Item = require('../../models/Items');

// route   GET api/items
router.get('/', (req, res) => {
  Item.find()
    .sort({ name: 1 })
    .then(items => res.json(items));
});

// route   POST api/items
router.post('/', (req, res) => {
  const newItem = new Item({
    name: req.body.name,
    email: req.body.email
  });

  newItem.save();
});

module.exports = router;
...