React表单提交及POST请求正确实现方法指导（新手求助）

原代码存在的问题 #

• 表单输入框未与React状态绑定，无法收集用户输入的姓名和邮箱
• Contact对象定义时直接使用未声明的name和email变量，会触发语法错误
• SubmitContact组件参数接收方式错误，且未返回JSX内容，也未关联表单提交逻辑
• 表单未阻止默认提交行为，会导致页面刷新
• axios请求的错误处理未实现

完整正确实现代码 #

整合后的React组件代码

import axios from "axios";
import React, { useState } from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function ContactForm() {
  // 初始化表单状态，存储姓名和邮箱
  const [formData, setFormData] = useState({
    name: "",
    email: ""
  });
  // 存储请求结果和错误信息
  const [submitResult, setSubmitResult] = useState(null);
  const [errorMessage, setErrorMessage] = useState("");

  // 处理输入框值变化，同步更新状态
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  // 处理表单提交逻辑
  const handleSubmit = (e) => {
    // 阻止表单默认提交行为，避免页面刷新
    e.preventDefault();
    // 清空之前的结果和错误提示
    setSubmitResult(null);
    setErrorMessage("");

    axios.post(baseURL, formData)
      .then((response) => {
        setSubmitResult(response.data);
        // 提交成功后清空表单
        setFormData({ name: "", email: "" });
      })
      .catch((error) => {
        // 捕获错误并设置提示信息
        setErrorMessage(`提交失败：${error.message}`);
      });
  };

  return (
    <form onSubmit={handleSubmit} className='mt-4 register-form'>
      <div className='row'>
        <div className='col-sm-6'>
          <div className='input-group mb-3'>
            <input
              type='text'
              className='form-control'
              placeholder='Name'
              aria-label='name'
              name="name"
              value={formData.name}
              onChange={handleInputChange}
              required
            />
          </div>
        </div>
        <div className='col-sm-6 '>
          <div className='input-group mb-3'>
            <input
              type='email'
              className='form-control'
              placeholder='Email'
              aria-label='email'
              name="email"
              value={formData.email}
              onChange={handleInputChange}
              required
            />
          </div>
        </div>

        <div className='col-12'>
          <button
            type='submit'
            className='btn btn-primary mt-4 d-block w-100'
          >
            Get Started
          </button>
        </div>

        {/* 提交成功提示 */}
        {submitResult && (
          <div className="col-12 mt-3 alert alert-success">
            提交成功！返回数据：<pre>{JSON.stringify(submitResult, null, 2)}</pre>
          </div>
        )}

        {/* 错误提示 */}
        {errorMessage && (
          <div className="col-12 mt-3 alert alert-danger">
            {errorMessage}
          </div>
        )}
      </div>
    </form>
  );
}

关键实现说明 #

• 受控组件绑定：用useState定义formData存储输入值，通过onChange同步输入框内容到状态，value属性绑定状态实现受控组件，确保输入值与状态一致
• 表单提交控制：通过onSubmit绑定处理函数，调用e.preventDefault()阻止默认页面刷新行为
• 请求处理：提交时将formData作为请求体发送，成功后更新结果状态并清空表单，失败时捕获错误并显示友好提示
• 用户反馈：添加成功和错误提示区域，让用户清晰知道提交状态

内容的提问来源于stack exchange，提问作者Peter Penzov