laravel 当我添加值属性时,不能写入输入

3lxsmp7m  于 2023-08-08  发布在  其他
关注(0)|答案(1)|浏览(134)

所以我有我的React项目创建的vite在这个项目中我有signup.jsx组件那里是一个输入,但当我添加值onchange属性我不能再写在输入这里是我的组件

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"
                            value={formData.name}
                            onChange={handleChange}
                        />
                        <input
                            type="text"
                            className="input"
                            placeholder="Email"
                            value={formData.email}
                            onChange={handleChange}
                        />
                        <input
                            type="password"
                            className="input"
                            placeholder="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;

字符串
我想从我的react组件中的注册表单中获取数据,但是当我将值属性添加到输入时,我无法在输入中写入数据

efzxgjgh

efzxgjgh1#

当你提供value属性时,输入就变成了一个“受控组件”,这意味着它的值是由React状态控制的。因此,对输入的任何更改都将只反映状态的值,而不是实际键入的字符。
要解决这个问题,您应该为每个输入元素正确地分离value和onChange属性。您可以将值从状态传递到输入,并在用户键入时使用onChange事件更新状态。
下面是你的更新代码:

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="text"
                            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;

字符串

相关问题