在 React 中,你可以使用onSubmit事件处理程序来捕获表单提交事件,并在事件处理程序中向 Node.js 发送数据。以下是一个示例,展示了如何使用onSubmit从 React 向 Node.js 发送数据:

  1. 在 React 组件中定义onSubmit事件处理程序:
import React, { useState } from'react';

function MyForm() {
  const [formData, setFormData] = useState({});

  const handleSubmit = (e) => {
    e.preventDefault();
    // 在这里发送数据到 Node.js
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value })} />
      <input type="submit" value="提交" />
    </form>
  );
}

在上述示例中,我们定义了一个名为MyForm的 React 组件,其中包含一个表单。onSubmit事件处理程序通过e.preventDefault()方法阻止表单的默认提交行为,然后使用console.log(formData)打印表单数据。

  1. 在 Node.js 中接收数据

在 Node.js 中,你可以使用任何 Web 框架或后端语言来接收从 React 发送的数据。以下是一个使用 Express.js 框架的示例:

const express = require('express');

const app = express();

app.post('/submit-form', (req, res) => {
  console.log(req.body);
  res.send('数据已成功接收');
});

app.listen(3000, () => {
  console.log('服务器启动,监听端口 3000');
});

在上述示例中,我们创建了一个 Express.js 应用,并定义了一个/submit-form的 POST 请求处理函数。在处理函数中,我们使用req.body获取从 React 发送的数据,并将其打印到控制台。然后,我们使用res.send()发送一个响应,告知用户数据已成功接收。

  1. 在 React 中发送数据

在 React 组件中,你可以使用fetchaxios等 HTTP 请求库将表单数据发送到 Node.js 服务器。以下是一个使用fetch的示例:

import React, { useState } from'react';

function MyForm() {
  const [formData, setFormData] = useState({});

  const handleSubmit = (e) => {
    e.preventDefault();
    // 使用 fetch 发送数据到 Node.js
    fetch('/submit-form', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(formData),
    })
     .then(response => response.json())
     .then(data => console.log(data))
     .catch(error => console.error(error));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value })} />
      <input type="submit" value="提交" />
    </form>
  );
}

在上述示例中,我们定义了一个名为MyForm的 React 组件,其中包含一个表单。onSubmit事件处理程序通过e.preventDefault()方法阻止表单的默认提交行为,然后使用fetch发送一个 POST 请求到/submit-form路径。在请求中,我们设置了请求的方法、头部和请求体,将表单数据作为 JSON 字符串发送到服务器。

请注意,这只是一个简单的示例,实际应用中可能需要根据你的具体需求进行更多的错误处理和数据验证。此外,确保在 Node.js 服务器中正确配置了路由和处理程序,以接收和处理从 React 发送的数据。