ReactJS输入框无法输入文本问题排查求助

核心问题 #

你的输入框缺少name属性，handleChange函数依赖e.target.name来匹配state中的字段，导致无法更新state，输入框内容因此无法变化。另外，表单提交时会触发默认页面刷新，也需要处理。

修复后的完整代码 #

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))
        .catch((error) => console.log(error));
    } else {
      alert("Invalid input");
    }
  };

  return (
    <form onSubmit={register}>
      <h1>Sign up</h1>
      <br />

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

      <button type="submit">
        <span>Sign up</span>
      </button>
    </form>
  );
};

export default SignUp;

关键修复点 #

• 添加name属性：给每个输入框设置name，值与state中的name、email、password一一对应，确保handleChange能正确更新对应字段的state值。
• 阻止默认提交行为：在register函数中调用e.preventDefault()，避免提交后页面刷新丢失输入内容。
• 绑定表单onSubmit事件：将提交逻辑绑定到表单的onSubmit事件上，而非按钮的onClick，符合React表单的标准处理方式。

修改完成后，输入框可正常输入内容，提交时能正确将用户信息发送到后端接口，最终存入MongoDB。

内容的提问来源于stack exchange，提问作者Max Hao