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 表单的数据的主要内容,如果未能解决你的问题,请参考以下文章
如何编码以防止此错误消息来自正则表达式并通过单击关闭按钮随时关闭该表单?
使用 mail() PHP 脚本的 jQuery AJAX 表单发送电子邮件,但来自 HTML 表单的 POST 数据未定义