ReactJS输入框无法输入文本：深入理解受控组件与状态管理

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

const SignUp = () => {
  const [user, setUser] = useState({
    name: "",
    email: "",
    password: ""
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    // 调试时可在此处打印，查看name和value是否正确
    // console.log("Updating state for:", name, "with value:", value);
    setUser({
      ...user,
      [name]: value // 动态更新对应的属性
    });
  };

  const register = async (e) => {
    e.preventDefault(); // 阻止表单默认提交行为（页面刷新）
    const { name, email, password } = user;

    if (name && email && password) {
      try {
        const res = await axios.post("http://localhost:8800/api/auth/signup", user);
        console.log("注册成功响应:", res.data);
        alert("注册成功！"); // 用户反馈
        // 注册成功后可以清空表单或进行页面跳转
        setUser({ name: "", email: "", password: "" }); 
      } catch (error) {
        console.error("注册失败:", error.response?.data || error.message); // 打印详细错误信息
        alert("注册失败: " + (error.response?.data?.message || "请稍后再试。")); // 用户反馈
      }
    } else {
      alert("请填写所有必填字段。"); // 更明确的提示
    }
  };

  return (
    <form onSubmit={register}> {/* 将提交逻辑绑定到form的onSubmit事件 */}
      <h1>注册</h1>
      <br />

      <span className="input"></span>
      <input
        type="text"
        name="name" // 关键修改：添加name属性，与user.name对应
        className="name"
        value={user.name}
        onChange={handleChange}
        placeholder="全名"
        required
      />
      <span className="input"></span>
      <input
        type="email"
        name="email" // 关键修改：添加name属性，与user.email对应
        className="email"
        placeholder="电子邮件地址"
        required
        value={user.email}
        onChange={handleChange}
      />
      <span id="passwordMeter"></span>
      <input
        type="password"
        name="password" // 关键修改：添加name属性，与user.password对应
        className="password"
        placeholder="密码"
        value={user.password}
        onChange={handleChange}
      />

      <button type="submit"> {/* 按钮类型为submit，会触发form的onSubmit */}
        <span>注册</span>
      </button>
    </form>
  );
};

export default SignUp;