Javascript 如何将数据从ReactJS发布到NodeJS Express API

我需要获取ReactJS（JSX）中提交的forma数据，并将其提交到Express API后端的app.post方法。我已经找了很久怎么做了，但我仍然不知道

我的前端表单代码：

import React, { Component } from 'react'
import '../public/styles/App.css'
import Header from "./header.js"

export default class Login extends Component {

    render() {
        return(   
            <div style={{border:"none"}}>
                <div style={{background:"white"}}>
                    <br></br>
                    <center><Header /></center>
                    <br></br>
                </div>
                <br></br>
                <br></br>
                <div style={{background:"white"}}>
                    <center><form>
                        <br></br>
                        Username: <br></br>
                        <input type = "text" name= "username"></input>
                        <br></br>
                        <br></br>
                        Password: <br></br>
                        <input type = "text" name = "password"></input>
                        <br></br>
                        <br></br>
                        <input type = "submit" value = "Log-in"></input>
                        <br></br>
                    </form></center>
                    <br></br>
                </div>
            </div>
        )
    }
}

---

不确定express post需要使用什么参数，或者如何通过ReactJS中的组件发送。任何关于如何将表单数据从ReactJS发送到nodejsexpressapi的粗略想法都会很棒

使用fetch发布数据（JSON格式）：

另外，不要忘记定义这些状态：

constructor(props) {
    super(props);
    this.state = {
        username: "",
        password: ""
    }
}

---

您的表单是空的，它基本上没有属性可以将其发送到路由。因此，前端代码无法与后端连接

---

只需添加

就可以了。

我确信上面提到的答案是有效的，但这里有一个使用axios和并发的初学者友好方法

为axios同时安装npm

以下是您的登录文件可以执行的操作：

import React from 'react';
import '../public/styles/App.css'
import Header from "./header.js"
import Axios from 'axios'

class Login extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            username: '',
            password: ''
        };
    }

    handleInputChange = (e) => {

        this.setState({

            [e.target.name]: e.target.value

        });
    }

    handleSubmit = (e) => {

        e.preventDefault();

        const url = 'YOUR BACKEND URL HERE';

        const user = {

            username: this.state.username, 
            password: this.state.password
        }

        Axios.post(url, user).then((res) => {

            //handle your login 

        }).catch((e) => {

            //handle your errors
        });

    }

    render() {

        return (

            <div style={{border:"none"}}>
                <div style={{background:"white"}}>
                    <br></br>
                    <center><Header /></center>
                    <br></br>
                </div>
                <br></br>
                <br></br>
                <div style={{background:"white"}}>
                    <center>
                    <form onSubmit={this.handleSubmit}>
                        <br></br>
                        Username: <br></br>
                        <input type = "text" onChange={this.handleInputChange} name= "username"></input>
                        <br></br>
                        <br></br>
                        Password: <br></br>
                        <input type = "password" name = "password" onChange={this.handleInputChange}></input>
                        <br></br>
                        <br></br>
                        <input type = "submit" value = "Log-in"></input>
                        <br></br>
                    </form>
                  </center>
                    <br></br>
                </div>
            </div>

        );
    } 
}

export default Login;

请同时阅读本文，以获取更广泛的示例

我正在使用运行我的服务器（app.js）。此外，在我的例子中，react项目位于客户机文件夹中，因此进行了上述配置

在react项目文件夹中，打开package.json并添加以下行：

"proxy": "http://localhost:5000"

考虑到您的后端服务器正在端口5000上运行

handleUserNameChange = event => {
    this.setState({username: event.target.value});
}

handlePasswordChange = event => {
    this.setState({username: event.target.value});
}

constructor(props) {
    super(props);
    this.state = {
        username: "",
        password: ""
    }
}

import React from 'react';
import '../public/styles/App.css'
import Header from "./header.js"
import Axios from 'axios'

class Login extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            username: '',
            password: ''
        };
    }

    handleInputChange = (e) => {

        this.setState({

            [e.target.name]: e.target.value

        });
    }

    handleSubmit = (e) => {

        e.preventDefault();

        const url = 'YOUR BACKEND URL HERE';

        const user = {

            username: this.state.username, 
            password: this.state.password
        }

        Axios.post(url, user).then((res) => {

            //handle your login 

        }).catch((e) => {

            //handle your errors
        });

    }

    render() {

        return (

            <div style={{border:"none"}}>
                <div style={{background:"white"}}>
                    <br></br>
                    <center><Header /></center>
                    <br></br>
                </div>
                <br></br>
                <br></br>
                <div style={{background:"white"}}>
                    <center>
                    <form onSubmit={this.handleSubmit}>
                        <br></br>
                        Username: <br></br>
                        <input type = "text" onChange={this.handleInputChange} name= "username"></input>
                        <br></br>
                        <br></br>
                        Password: <br></br>
                        <input type = "password" name = "password" onChange={this.handleInputChange}></input>
                        <br></br>
                        <br></br>
                        <input type = "submit" value = "Log-in"></input>
                        <br></br>
                    </form>
                  </center>
                    <br></br>
                </div>
            </div>

        );
    } 
}

export default Login;

{
  "name": "dev-proj",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "client-install": "npm install --prefix client",
    "start": "node app.js",
    "server": "nodemon app.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "express": "^4.16.3",  
  }
}

"proxy": "http://localhost:5000"