合成事件而不是useState值
合成事件而不是useState值
提问于 2020-08-08 23:28:53
我是个新手，所以当我试图解释这个问题时，请耐心等待。我正在创建一个应用程序，它可以提取所有的COD客户信息并允许用户搜索它，以及创建一个计算器来计算现场的总费用，但是所有这些都在工作，堆栈需要更多的文本而不是代码，所以我真的只是为了张贴我真正的问题而填满空间。
我在一个管理页面上工作，但每当我点击提交按钮进行测试时，我总是得到以下信息：
SyntheticEvent {dispatchConfig: null,etc}对于表单中的所有3个字段，我就是想不出为什么。我的所有console.logs都将字段显示为null/SyntheticEvent，因此不会传递任何信息。
import React, { useState, useEffect } from "react";
import { registerUser } from "../api";
const Admin = () => {
const admin = localStorage.getItem("admin");
const [user, setUser] = useState("");
const [password, setPassword] = useState("");
const [email, setEmail] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
console.log(user, password, email);
cancelCourse();
};
const cancelCourse = () => {
setUser("");
setPassword("");
setEmail("");
};
if (!admin) {
return <div className="pleaselogin">You do not have access</div>;
} else {
return (
<div className="page">
<form id="create">
<div>Create User</div>
<input
className="form-input"
id="name"
placeholder="Enter User's Name"
onChange={setUser}
></input>
<input
className="form-input"
id="name"
placeholder="Enter User's Password"
onChange={setPassword}
></input>
<input
className="form-input"
id="name"
placeholder="Enter User's Email"
onChange={setEmail}
></input>
<button className="submit" onClick={handleSubmit}>
Submit
</button>
</form>
</div>
);
}
};
export default Admin;回答 3
Stack Overflow用户
发布于 2020-08-09 00:16:23
你需要更新你对setUser，setPassword和setEmail的调用。使用当前的代码，它不能设置useState期望的精确值。需要设置如下内容：
<input
className="form-input"
id="name"
placeholder="Enter User's Name"
onChange={(event) => setUser(event.target.value)}
/>我已经在code sandbox上创建了你的推荐人。
Stack Overflow用户
发布于 2020-08-09 00:15:01
使用e => setUser(e.target.value)代替setUser等
所以你的代码应该是
import React, { useState, useEffect } from "react";
import { registerUser } from "../api";
const Admin = () => {
const admin = localStorage.getItem("admin");
const [user, setUser] = useState("");
const [password, setPassword] = useState("");
const [email, setEmail] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
console.log(user, password, email);
cancelCourse();
};
const cancelCourse = () => {
setUser("");
setPassword("");
setEmail("");
};
if (!admin) {
return <div className="pleaselogin">You do not have access</div>;
} else {
return (
<div className="page">
<form id="create">
<div>Create User</div>
<input
className="form-input"
id="name"
placeholder="Enter User's Name"
onChange={e => setUser(e.target.value)}
></input>
<input
className="form-input"
id="name"
placeholder="Enter User's Password"
onChange={e => setPassword(e.target.value)}
></input>
<input
className="form-input"
id="name"
placeholder="Enter User's Email"
onChange={e => setEmail(e.target.value)}
></input>
<button className="submit" onClick={handleSubmit}>
Submit
</button>
</form>
</div>
);
}
};
export default Admin;Stack Overflow用户
发布于 2020-08-09 00:28:51
我在下面拉出了一个愚蠢的，可以工作的代码
import React, { useState, useEffect } from "react";
import { registerUser } from "../api";
const Admin = () => {
const main = localStorage.getItem("admin");
const [user, setUser] = useState("");
const [password, setPassword] = useState("");
const [email, setEmail] = useState("");
const handleRegis = (event) => {
event.preventDefault();
// registerUser(user, password, email);
console.log(user, password, email);
cancelCourse();
};
const cancelCourse = () => {
setUser("");
setPassword("");
setEmail("");
};
const changeUser = (event) => {
setUser(event.target.value);
};
const changePassword = (event) => {
setPassword(event.target.value);
};
const changeEmail = (event) => {
setEmail(event.target.value);
};
if (!main) {
return <div className="pleaselogin">You do not have access</div>;
} else {
return (
<div className="page">
<form id="create">
<div>Create User</div>
<input
className="form-input"
id="name"
placeholder="Enter User's Name"
value={user}
onChange={changeUser}
></input>
<input
className="form-input"
id="name"
placeholder="Enter User's Password"
value={password}
onChange={changePassword}
></input>
<input
className="form-input"
id="name"
placeholder="Enter User's Email"
value={email}
onChange={changeEmail}
></input>
<button className="submit" onClick={handleRegis}>
Submit
</button>
</form>
</div>
);
}
};
export default Admin;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63317132
复制相关文章
相似问题
腾讯云开发者
