深入理解ReactJS受控组件：解决输入框无法输入文本的问题

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

const handleChange = (e) => {
  const { name, value } = e.target; // 关键行
  setUser({
    ...user,
    [name]: value // 使用 `name` 动态更新状态
  });
};

<input
  type="text"
  className="name"
  value={user.name}
  onChange={handleChange}
  placeholder="Full name"
  required
/>
<!-- 缺少 name="name" 属性 -->

<input
  type="email"
  className="email"
  placeholder="Email address"
  required
  value={user.email}
  onChange={handleChange}
/>
<!-- 缺少 name="email" 属性 -->

<input
  type="password"
  className="password"
  placeholder="Password"
  value={user.password}
  onChange={handleChange}
/>
<!-- 缺少 name="password" 属性 -->

<input
  type="text"
  name="name" // 添加 name 属性，与 user.name 对应
  className="name"
  value={user.name}
  onChange={handleChange}
  placeholder="Full name"
  required
/>

<input
  type="email"
  name="email" // 添加 name 属性，与 user.email 对应
  className="email"
  placeholder="Email address"
  required
  value={user.email}
  onChange={handleChange}
/>

<input
  type="password"
  name="password" // 添加 name 属性，与 user.password 对应
  className="password"
  placeholder="Password"
  value={user.password}
  onChange={handleChange}
/>

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;
    setUser({
      ...user,
      [name]: value
    });
  };

  const register = (e) => { // 注意：对于提交按钮，通常会阻止默认行为
    e.preventDefault(); // 阻止表单默认提交行为，防止页面刷新
    const { name, email, password } = user;
    if (name && email && password) {
      axios
        .post("http://localhost:8800/api/auth/signup", user)
        .then((res) => console.log(res.data)) // 打印响应数据
        .catch((error) => console.error("Registration error:", error)); // 打印错误信息
    } else {
      alert("请输入所有必填字段");
    }
  };

  return (
    <form onSubmit={register}> {/* 将 onSubmit 绑定到 form 元素 */}
      <h1>Sign up</h1>
      <br />

      <span className="input"></span>
      <input
        type="text"
        name="name" // 修正：添加 name 属性
        className="name"
        value={user.name}
        onChange={handleChange}
        placeholder="Full name"
        required
      />
      <span className="input"></span>
      <input
        type="email"
        name="email" // 修正：添加 name 属性
        className="email"
        placeholder="Email address"
        required
        value={user.email}
        onChange={handleChange}
      />
      <span id="passwordMeter"></span>
      <input
        type="password"
        name="password" // 修正：添加 name 属性
        className="password"
        placeholder="Password"
        value={user.password}
        onChange={handleChange}
      />

      <button type="submit"> {/* type="submit" 按钮会触发 form 的 onSubmit 事件 */}
        <span>Sign up</span>
      </button>
    </form>
  );
};

export default SignUp;