Question

对不起，我确定在我进行几次搜索并且找不到该问题之前，已经回答了该问题。

我只是想找出一种提交表单的方法，并向用户发送“成功提交您的信息”的响应，并清除表单。

我做了一个小表格以使其简单-任何帮助将不胜感激。

**编辑-现在，您单击提交，所有内容都会正确提交到MongoDB中，但是客户端没有任何反应。想显示出确实已经添加了数据

form.js组件

UPDATE users 
SET basket_value = (SELECT basket FROM
   (SELECT name, SUM(i.amount*m.price) AS basket
   FROM users u JOIN items i ON u.name = i.username 
   JOIN market_prices m ON i.item = m.item
   GROUP BY u.name) q1 WHERE q1.name = users.name);

ItemActions.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);

items.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
  };
};

React Form-如果成功输入（MongoDB）数据库，则显示消息

0 个答案: