React表单提交不发送POST请求

Question

我正在尝试为Spring Boot应用程序创建一个前端，我选择了React，但我对React或JavaScript并没有太多经验。 因此，我有一个表单，我试图使用它发送一个POST请求，但是当我按提交按钮时，似乎什么也没发生。我认为问题在于我的onSubmit处理程序，但我不知道它出了什么问题。当我手动发送POST请求时，它可以正常工作，因此我不认为是REST API引起的问题。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import { Link } from 'react-router-dom';

class Create extends Component {

  constructor() {
    super();
    this.state = {
      name: '',
      email: '',
      title: '',
      description: ''
    };
  }
  onChange = (e) => {
    const state = this.state
    state[e.target.name] = e.target.value;
    this.setState(state);
  }

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

    const { name, email, title, description } = this.state;

   axios.post('/create', { name, email, title, description })
      .then((result) => {
        this.props.history.push("/")
      });


  }

  render() {
    const { name, email, title, description } = this.state;
    return (
      <div class="container">
       <div class="panel panel-default">
         <div class="panel-heading">
            <h3 class="panel-title">
              Send Message
            </h3>
          </div>
          <div class="panel-body">
            <h4><Link to="/"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Message List</Link></h4>
            <form onSubmit={this.onSubmit}>
             <div class="form-group">
               <label for="name">Name:</label>
               <input type="text" class="form-control" name="name" onChange={this.onChange}/>
              </div>
              <div class="form-group">
               <label for="email">Email:</label>
                <input type="text" class="form-control" name="email" onChange={this.onChange}/>
              </div>
              <div class="form-group">
                <label for="title">Title:</label>
                <input type="text" class="form-control" name="title" onChange={this.onChange}/>
          </div>
          <div class="form-group">
            <label for="description">Description:</label>
            <input type="text" class="form-control" name="description" onChange={this.onChange}/>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
          </div>
       </div>
      </div>
    );
      }
    }

export default Create;

- Niall

---

如果记录错误，你会得到什么？ - Colin Ricardo

你期望发生什么？ - Quentin

在 onSubmit() 函数中添加 console.log('test') 并查看它是否在按钮操作时被调用。 - Maycon Seidel

函数onSubmit()是否被调用了？可能是bind()的问题... - Dupocas

我在这里创建了一个分支：http://jsfiddle.net/h3spgwya/ 尽管存在其他错误（和不良实践），但该方法可以正确调用。 - Chris

Answer 1

React的第一个规则是，不要直接更新状态属性（否则React将不知道状态已更改）。

很难说如果这样做React会如何表现。因此，不要直接设置状态值，

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

将其更改为以下内容，然后尝试重新提交。

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

- dance2die