Vite创建的React项目中Signup组件添加value/onChange后输入框无法输入

你的问题核心是受控输入框缺少name属性，导致handleChange函数无法正确匹配并更新formData状态，所以输入框内容无法随输入变化。

修复步骤 #

给每个输入框添加与formData字段对应的name属性：

• 姓名输入框添加name="name"
• 邮箱输入框添加name="email"
• 密码输入框添加name="password"

修改后的完整组件代码 #

import React, { useRef, useEffect, useState } from "react";
import { AiOutlineCaretLeft } from "react-icons/ai";
import Typed from "typed.js";
import axios from "axios";
import "./Css/Form.css";

const UserSignUP = () => {
        const el = useRef(null);
        const [typedInstance, setTypedInstance] = useState(null);

        useEffect(() => {
            const typed = new Typed(el.current, {
                strings: ["Employee", " "],
                typeSpeed: 50,
                loop: true,
                backDelay: 1000,
            });

            setTypedInstance(typed);

            return () => {
                typed.destroy();
            };
        }, []);

    // Post to Database
    const [formData, setFormData] = useState({
        name: "",
        email: "",
        password: "",
    });

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData((prevState) => ({
            ...prevState,
            [name]: value,
        }));
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        axios
            .post("/api/signUp", formData)
            .then((res) => {
                console.log(res.data);
            })
            .catch((error) => {
                console.log(error);
            });
    };

    return (
        <div className="sm:w-[50vw] h-[88vh] bg-[#FF6600] flex flex-col">
            <div className="absolute flex self-end top-[50%] text-8xl text-[#1D1F21] animate-bounce">
                <AiOutlineCaretLeft />
            </div>
            <div className="flex justify-center">
                <h2 className="text-white text-3xl py-6 font-semibold">
                    I'm an <span className="text-red-600" ref={el} />
                </h2>
            </div>

            <div className="flex justify-center items-center">
                <form className="form" onSubmit={handleSubmit}>
                    <div className="form_front w-full">
                        <div className="form_details text-white " >Sign Up</div>
                        <input
                            type="text"
                            className="input"
                            placeholder="Full name"
                            name="name"
                            value={formData.name}
                            onChange={handleChange}
                        />
                        <input
                            type="email"
                            className="input"
                            placeholder="Email"
                            name="email"
                            value={formData.email}
                            onChange={handleChange}
                        />
                        <input
                            type="password"
                            className="input"
                            placeholder="Password"
                            name="password"
                            value={formData.password}
                            onChange={handleChange}
                        />
                        <button className="btn" type="submit">
                            Sign up
                        </button>
                        <span className="switch text-gray-500">
                            Already have an account?{" "}
                            <a href="/login" className="signup_tog text-white">
                                Login
                            </a>
                        </span>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default UserSignUP;

额外小建议：把邮箱输入框的type从text改成email，浏览器会自动做基础格式校验，更符合表单语义规范。

内容的提问来源于stack exchange，提问作者Chouich Nacereddine