POST для выражения данных из формы React

Question

это мой третий день обучения React, и я пытаюсь получить регистрационную форму для публикации в 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 . Я закомментировал ту часть, которую я пытался использовать для отправки значений из формы в Express.

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>
        )
    }
}

Я искал около десяти часов и нашел минимальную информацию о публикации в Express, по крайней мере, для моих обстоятельств. Прежде всего, я нашел, как получить данные из Express. Я пробовал несколько методов для публикации информации и получал сообщение Cannot POST / users после каждой попытки.

Я бы по крайней мере хотел бы получить данные в console.log, чтобы я мог видеть, что они правильно собирают информацию. Нужно ли использовать componentDidMount вместе с почтовым запросом в Express? Если так, то как? Есть ли хорошие ресурсы для публикации данных формы в Express (для отправки в базу данных MySQL)? Нужно ли использовать AJAX? Знаете ли вы какие-либо хорошие ресурсы, которые могут описать этот процесс?

Если вы хотите увидеть больше кода или получить больше контекста, вы можете посетить мой репозиторий здесь: https://github.com/falondarville/usume

Выберите ресурсы, к которым обращались:

Traversy Media YouTube видео о связывании Express с React

Вопрос о переполнении стека - для монго

Вопрос о переполнении стека

Реактивная документация

Github Repo для аналогичного проекта

Сообщение в блоге - отправка данных формы ответа

Спасибо!

Answer 1

Вот рабочий пример

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>)
    }

в консоли вы найдете компонент формы, но вам нужно обрабатывать данные формы вручную.

Я предлагаю использовать избыточную и избыточную форму для контроля формы.

https://github.com/bsmahala/react-redux-route-sass-login

Выше приведен пример реакции с редуксной формой