所以我有我的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组件中的注册表单中获取数据,但是当我将值属性添加到输入时,我无法在输入中写入数据
1条答案
按热度按时间efzxgjgh1#
当你提供value属性时,输入就变成了一个“受控组件”,这意味着它的值是由React状态控制的。因此,对输入的任何更改都将只反映状态的值,而不是实际键入的字符。
要解决这个问题,您应该为每个输入元素正确地分离value和onChange属性。您可以将值从状态传递到输入,并在用户键入时使用onChange事件更新状态。
下面是你的更新代码:
字符串