如何将表单数据从 React 发送到 Express

React 是一个现代的 JavaScript 库，常用于构建大型、高效且可重用的 Web 应用程序。与此同时，Express 是一个常用的 Node.js Web 框架，用于构建高可靠性、高性能且易于维护的服务器端应用程序。

在开发 Web 应用程序时，你可能需要从前端的 React 应用程序向后端的 Express 服务器发送表单数据。本文将介绍如何使用 React 和 Express 实现这一功能。

1. 后端设置

首先，我们需要在 Express 应用程序中设置一个路由来接收表单数据。我们可以使用 body-parser 中间件来解析表单数据。

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.post('/submit', (req, res) => {
  const formData = req.body;
  // 处理表单数据
  res.send('表单数据已接收');
});

app.listen(3000, () => {
  console.log('应用程序已启动在端口 3000');
});

在上面的代码中，我们使用 body-parser 中间件来解析表单数据。app.post('/submit') 路由接收从 React 发送的 POST 请求，然后提取表单数据并进行处理。

2. 前端设置

接下来，在 React 应用程序中，我们需要创建一个组件，将表单数据发送到 Express 服务器。

首先，我们需要创建一个表单，通过 setState 方法来保存表单数据。然后，我们使用 fetch API 来发送 POST 请求以将表单数据发送到 Express 服务器。

import React, { Component } from 'react';

class Form extends Component {
  state = {
    name: '',
    email: '',
    message: '',
  }

  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({
      [name]: value,
    });
  }

  handleSubmit = (event) => {
    event.preventDefault();

    fetch('/submit', {
      method: 'POST',
      body: JSON.stringify(this.state),
      headers: {
        'Content-Type': 'application/json',
      },
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="name">Name</label>
        <input
          type="text"
          name="name"
          id="name"
          value={this.state.name}
          onChange={this.handleChange}
        />

        <label htmlFor="email">Email</label>
        <input
          type="email"
          name="email"
          id="email"
          value={this.state.email}
          onChange={this.handleChange}
        />

        <label htmlFor="message">Message</label>
        <textarea
          name="message"
          id="message"
          value={this.state.message}
          onChange={this.handleChange}
        />

        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default Form;

在上面的代码中，我们使用 React 中的 setState 方法来保存表单数据。在 handleSubmit 方法中，我们使用 fetch API 来发送 POST 请求，并将表单数据作为请求体发送到 Express 服务器。

我们使用 Content-Type: application/json 标头来指定请求体的数据类型为 JSON。

结论

现在，我们已经看到了如何将表单数据从 React 发送到 Express。使用此方法，我们可以轻松地在前端和后端之间传输数据。

下面是本文中的代码片段。（未标记行号）

import React, { Component } from 'react';

class Form extends Component {
  state = {
    name: '',
    email: '',
    message: '',
  }

  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({
      [name]: value,
    });
  }

  handleSubmit = (event) => {
    event.preventDefault();

    fetch('/submit', {
      method: 'POST',
      body: JSON.stringify(this.state),
      headers: {
        'Content-Type': 'application/json',
      },
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="name">Name</label>
        <input
          type="text"
          name="name"
          id="name"
          value={this.state.name}
          onChange={this.handleChange}
        />

        <label htmlFor="email">Email</label>
        <input
          type="email"
          name="email"
          id="email"
          value={this.state.email}
          onChange={this.handleChange}
        />

        <label htmlFor="message">Message</label>
        <textarea
          name="message"
          id="message"
          value={this.state.message}
          onChange={this.handleChange}
        />

        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default Form;

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.post('/submit', (req, res) => {
  const formData = req.body;
  // 处理表单数据
  res.send('表单数据已接收');
});

app.listen(3000, () => {
  console.log('应用程序已启动在端口 3000');
});

Markdown 格式：

# 如何将表单数据从 React 发送到 Express

React 是一个现代的 JavaScript 库，常用于构建大型、高效且可重用的 Web 应用程序。与此同时，Express 是一个常用的 Node.js Web 框架，用于构建高可靠性、高性能且易于维护的服务器端应用程序。

在开发 Web 应用程序时，你可能需要从前端的 React 应用程序向后端的 Express 服务器发送表单数据。本文将介绍如何使用 React 和 Express 实现这一功能。

## 1. 后端设置

首先，我们需要在 Express 应用程序中设置一个路由来接收表单数据。我们可以使用 `body-parser` 中间件来解析表单数据。

```javascript
// 代码片段1

在上面的代码中，我们使用 body-parser 中间件来解析表单数据。app.post('/submit') 路由接收从 React 发送的 POST 请求，然后提取表单数据并进行处理。

2. 前端设置

接下来，在 React 应用程序中，我们需要创建一个组件，将表单数据发送到 Express 服务器。

首先，我们需要创建一个表单，通过 setState 方法来保存表单数据。然后，我们使用 fetch API 来发送 POST 请求以将表单数据发送到 Express 服务器。

// 代码片段2

在上面的代码中，我们使用 React 中的 setState 方法来保存表单数据。在 handleSubmit 方法中，我们使用 fetch API 来发送 POST 请求，并将表单数据作为请求体发送到 Express 服务器。

我们使用 Content-Type: application/json 标头来指定请求体的数据类型为 JSON。

结论

现在，我们已经看到了如何将表单数据从 React 发送到 Express。使用此方法，我们可以轻松地在前端和后端之间传输数据。

下面是本文中的代码片段。

// 代码片段2

// 代码片段1