POST 以表达来自 React 表单的数据

Posted

技术标签:

【中文标题】POST 以表达来自 React 表单的数据【英文标题】:POST to Express the data from React form 【发布时间】:2018-10-16 20:23:08 【问题描述】:

这是我学习 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>
        )
    

我已经研究了大约 10 个小时,发现的关于发布到 Express 的信息很少,至少在我的情况下是这样。首先,我发现了如何从 Express 中获取数据。我尝试了几种尝试发布信息的方法,并且每次尝试后都收到消息无法发布/用户。

我至少希望将数据获取到 console.log,以便我可以看到它正确地获取了信息。我是否需要将 componentDidMount 与 Express 中的 post 请求结合使用?如果是这样,怎么做?有没有关于将表单数据发布到 Express(要推送到 MySQL 数据库)的好资源?我需要使用ajax吗?你知道有什么好的资源可以概括这个过程吗?

如果您想查看更多代码或获取更多上下文,可以在此处访问我的 repo:https://github.com/falondarville/usume

选择咨询的资源:

关于将 Express 与 React 连接起来的 Traversy Media YouTube 视频

Stack Overflow Question - Mongo Specific

Stack Overflow Question

React Documentation

Github Repo for Similar Project

Blog Post - Submitting React Form Data

谢谢!

【问题讨论】:

【参考方案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>)
    

在控制台中你会找到表单组件,但需要手动处理表单数据。

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

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

以上链接是redux redux形式的reactjs示例

【讨论】:

以上是关于POST 以表达来自 React 表单的数据的主要内容,如果未能解决你的问题,请参考以下文章

如何编码以防止此错误消息来自正则表达式并通过单击关闭按钮随时关闭该表单?

来自模型的输入未包含在表单 POST 数据中

使用 mail() PHP 脚本的 jQuery AJAX 表单发送电子邮件,但来自 HTML 表单的 POST 数据未定义

正则表达过滤表单隐藏元素,组装post数据

php 你如何确保 $_POST 数据来自你的表单而不是外部影响?

POST 500(内部服务器错误)无法在节点服务器上使用 react js 发布表单数据