Question

我在我的reactJs文件之一中有一个注册表，其中包含输入字段的所有值（按我的预期工作）。
SignUp.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class SignUpForm extends Component {
    constructor() {
        super();

        this.state = {
            email: '',
            password: '',
            username: '',
            hasAgreed: false,
            formErrors: {email: '', password: ''},
            emailValid: false,
            passwordValid: false,
            formValid: false
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(e) {
        let target = e.target;
        let value = target.type === 'checkbox' ? target.checked : target.value;
        let name = target.name;

        this.setState({[name]: value});
    }

    handleSubmit(e) {
        e.preventDefault();

        console.log('The form was submitted with the following data:');

        console.log([this.state.email, cryptr.encrypt(this.state.password), this.state.username, this.state.hasAgreed]);

       //I want to send my above data to node server

    }

    render() {
        return (
            <div className="FormCenter">
                <form onSubmit={this.handleSubmit} className="FormFields" method="POST" action="/register">
                    <div className="FormField">
                        <label htmlFor="name">Username</label>
                        <input type="text" id="name" placeholder="Enter your username" name="username" value={this.state.username} onChange={this.handleChange} />
                    </div>
                    <div className="FormField">
                        <label htmlFor="password">Password</label>
                        <input type="password" id="password" placeholder="Enter your password" name="password" value={this.state.password} onChange={this.handleChange} />
                    <div className="FormField">
                        <label htmlFor="email">E-Mail Address</label>
                        <input type="email" id="email" placeholder="Enter your email" name="email" value={this.state.email} onChange={this.handleChange} />
                    </div>
                    </div>

                    <div className="FormField">
                        <label>
                            <input type="checkbox" name="hasAgreed" value={this.state.hasAgreed} onChange={this.handleChange} /> I agree all statements in <a href="google.com">terms of service</a>
                        </label>
                    </div>
                </form>
            </div>
        );
    }
}

export default SignUpForm;

现在，我要将提到的数据发送到创建的节点服务器。
server.js

const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, "src/containers/user")));

//the request in which I expect input data
app.post('/register', (req, res) => {
    if (!req.body) return res.sendStatus(400);
    console.log(req.body, "body");
    res.send('welcome, ' + req.body.username)
});

app.listen(5000, () => {
    console.log("is listening on port 5000");
});

正如我所期望的那样，在 form 标签中编写method="POST" action="/register"会成功，但是即使console.log请求中的/register也没有响应。

注意：，我下一步要做的是将所有数据写入txt文件。因此必须在后端获取数据。

Answer 1

您需要做的就是像这样将数据作为对象传递给axios，这表明您已安装在项目中。

const formData = {
    email: this.state.email,
    password: cryptr.encrypt(this.state.password)
    username: this.state.username,
    hasAgreed: this.state.hasAgreed
}

axios({
    method: 'post',
    url: '/register',
    data: formData,
    config: { headers: {'Content-Type': 'multipart/form-data' }}
})
.then(function (response) {
    //handle success
})
.catch(function (response) {
    //handle error
});

Answer 2

表单的默认行为是在单击“提交”按钮或用户按下Enter键时提交。但是，就您而言，您有一个类似的提交处理程序；

handleSubmit(e) {
        e.preventDefault();

        console.log('The form was submitted with the following data:');

        console.log([this.state.email, cryptr.encrypt(this.state.password), this.state.username, this.state.hasAgreed]);

       //I want to send my above data to node server

    }

在此处理程序中，您正在编写e.preventDefault();，顾名思义，它可以防止表单的默认行为发生。结果，实际上没有向服务器发出任何请求。

现在我知道最可靠的方法是使用某种Ajax库。您可以使用fetch或类似axios的东西。

MAY可以使用的另一种方法是删除e.preventDefault();。现在这种方式比较棘手。通常，react应用程序与api不在同一服务器上提供服务，在这种情况下，您请求的url需要看起来像这样。 http://localhost:5000/register。或者，您可以告诉webpack开发服务器代理您的请求。即使那样，我个人也不敢肯定这会成功，因为我从未尝试过。

需要注意的重要一点是，如果未从api的同一位置提供react app或wepback没有完成代理，则您选择的任何一种方法都将在请求中要求完整的url。换句话说，您可能非常需要http://localhost:5000/register。

我的建议是使用我提到的ajax库。

希望这会有所帮助。

使用reactJs和NodeJs发出http发布请求

2 个答案: