Mysql POST表示来自React表单的数据

这是我学习React的第三天，我正在尝试让我的注册表单post to Express（以便我可以将这些值添加到我的MySQL数据库）。我能够获取一些静态信息并将其显示在React端，因此我知道Express和React是连接在一起的

以下内容来自文件users.js，我想在其中收集新的注册信息，然后将其添加到MySQL中，以便稍后用户登录时获取

const express = require('express');
const mysql = require('mysql');

const app = express();

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

app.post('/users', function(request, response){
    var email = request.body.email;
    var first = request.body.first;
    var last= request.body.last;
    var skills = request.body.skills;

    console.log(email, first, last, skills);
    res.send(email, first, last, skills);
})

以下内容来自register.jsx。我注释掉了我试图用来将表单中的值推送到表达式中的部分

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Col, Button, Checkbox, Form, ControlLabel, FormGroup, FormControl } from 'react-bootstrap';
import './register.css'; 

export default class Register extends Component {

    // constructor(){
    //  super();
    //  this.state = {
    //      email: '',
    //      first: '',
    //      last: '',
    //      skills: ''
    //  };
    // }

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

    // onSubmit = (event) => {
    //  event.preventDefault();
    //  const { email, first, last, skills } = this.state;

    //  // componentDidMount(){
    //  //  console.log('state mounted')
    //  //  // fetch('/users')
    //  //  // .then(res => res.json())

    //  // }
    //  // console.log(this.state)
    // }

    render() {
        return (
            <Form horizontal method="post" action="/users">
                <FormGroup controlId="formHorizontalEmail">
                    <Col componentClass={ControlLabel} sm={4}>
                        Email
                </Col>
                <Col sm={5}>
                        <FormControl type="email" placeholder="Email" name="email" />
                    </Col>
                </FormGroup>

                <FormGroup controlId="formHorizontalFirstName">
                    <Col componentClass={ControlLabel} sm={4}>
                        First Name
                </Col>
                <Col sm={5}>
                        <FormControl type="text" placeholder="First Name" name="first"/>
                    </Col>
                </FormGroup>

                <FormGroup controlId="formHorizontalLastName">
                    <Col componentClass={ControlLabel} sm={4}>
                    Last Name
                </Col>
                <Col sm={5}>
                        <FormControl type="text" placeholder="Last Name" name="last" />
                    </Col>
                </FormGroup>

                <FormGroup controlId="formHorizontalSkills">
                    <Col componentClass={ControlLabel} sm={4}>
                    List your skills, each of them separated by a comma.
                </Col>
                <Col sm={5}>
                        <FormControl componentClass="textarea" placeholder="Skills" name="skills" />
                    </Col>
                </FormGroup>

                <FormGroup>
                    <Col smOffset={4} sm={10}>
                        <Checkbox>I agree to the Terms and Conditions of USUME.</Checkbox>
                    </Col>
                </FormGroup>

                 <FormGroup>
                    <Col smOffset={4} sm={10}>
                        <Button bsStyle='primary' type="submit">Register</Button>
                    </Col>
            </FormGroup>
            </Form>
        )
    }
}

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
从“react bootstrap”导入{Col，Button，Checkbox，Form，ControlLabel，FormGroup，FormControl}；
导入“./register.css”；
导出默认类寄存器扩展组件{
//构造函数（）{
//超级（）；
//此.state={
//电子邮件：“”，
//首先:",，
//最后:''，
//技能：“”
//  };
// }
//onChange=（事件）=>{
//const state=this.state；
//状态[event.target.name]=event.target.value；
//本.设置状态（状态）；
// }
//onSubmit=（事件）=>{
//event.preventDefault（）；
//const{email，first，last，skills}=this.state；
////componentDidMount（）{
////console.log（'state-mounted'）
/////fetch（“/users”）
////。然后（res=>res.json（））
//  // }
////console.log（this.state）
// }
render（）{
返回(
电子邮件
名字
姓
列出你的技能，每个技能用逗号分隔。
我同意USUME的条款和条件。
登记
)
}
}

我已经研究了大约十个小时，找到了关于发布到Express的最少信息，至少就我的情况而言。首先，我发现了如何从Express获取数据。我尝试了几种方法尝试发布信息，每次尝试后都会收到无法发布/用户的消息

我至少希望将数据获取到console.log，这样我就可以看到它正确地获取了信息。我是否需要将componentDidMount与Express中的post请求结合使用？如果是，怎么做？在发布表单数据以表达（推送到MySQL数据库）方面，有什么好的资源吗？我需要使用ajax吗？你知道有什么好的资源可以概述这个过程吗

如果您想查看更多代码或获取更多上下文，可以访问我的回购协议：

选择咨询的资源：

Traversy Media YouTube关于将Express与React链接的视频

---

谢谢大家!

这里是一个工作示例

submit(e) {
      e.preventDefault();
      console.log(e.target)
    }
    render() {
        const {children} = this.props;
        return (<div>
            <form onSubmit={this.submit.bind(this)}>
              <input type="text" name="name"/>
              <input type="submit" value="regester"/>
            </form>
          </div>)
    }

submit（e）{
e、 预防默认值（）；
console.log（例如target）
}
render（）{
const{children}=this.props；
返回(
)
}

在控制台中，您将找到表单组件，但需要手动处理表单数据

我建议使用redux和redux表单来控制表单

上面的链接是带有redux redux表单的reactjs示例