Javascript 具有多个状态值的React挂钩不起作用,但单独的状态值起作用
这一定是一个关于React钩子的老问题,但我就是不明白为什么,我只是用基本知识的钩子来修改代码。下面的示例格式是带有条件语句的单独状态值,适用于我的输入表单,但:Javascript 具有多个状态值的React挂钩不起作用,但单独的状态值起作用,javascript,reactjs,react-hooks,use-state,react-bootstrap-form,Javascript,Reactjs,React Hooks,Use State,React Bootstrap Form,这一定是一个关于React钩子的老问题,但我就是不明白为什么,我只是用基本知识的钩子来修改代码。下面的示例格式是带有条件语句的单独状态值,适用于我的输入表单,但: const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [userName, setUserName] = useState(""); const
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [userName, setUserName] = useState("");
const [error, setError] = useState(null);
const onChangeHandler = event => {
const { name, value } = event.currentTarget;
if (name === "userEmail") {setEmail(value)}
else if (name === "userPassword") {setPassword(value)}
else if (name === "userName") {setUserName(value)}
};
当我尝试将其置于单一状态(如下面的示例)时,它不起作用,直接转到错误消息:
const [newUser, setNewUser] = useState({
userName: "",
email: "",
password: "",
error: null,
});
const { userName, email, password, error } = newUser
const onChangeHandler = event => {
const { name, value } = event.currentTarget;
setNewUser({...newUser, [name]: value})
};
对于输入字段,该字段适用于单独的状态值,但不适用于多个状态值,并且字段不可单击:
<Form.Group>
<Form.Control
size="lg"
type="text"
placeholder="Username"
name="userName"
value={userName}
onChange={event => onChangeHandler(event)}
required
/>
</Form.Group>
<Form.Group>
<Form.Control
size="lg"
type="email"
name="userEmail"
placeholder="E-mail"
value={email}
onChange={event => onChangeHandler(event)}
required
/>
</Form.Group>
<Form.Group>
<Form.Control
type={"password"}
placeholder="Password"
name="userPassword"
value={password}
onChange={event => onChangeHandler(event)}
required
/>
</Form.Group>
onChangeHandler(事件)}
必修的
/>
onChangeHandler(事件)}
必修的
/>
onChangeHandler(事件)}
必修的
/>
你把名字弄混了。
在初始状态下,您有以下内容:
const [newUser, setNewUser] = useState({
userName: "",
email: "",
password: "",
error: null,
});
但是在更改值时,您将值设置为用户名
,用户电子邮件
,用户密码
。正如下面的JSX中提到的,您添加了每个字段的名称属性
同步名称,您就可以开始了它对用户名输入有效吗?是的,我唯一可以编辑的是用户名,这是我唯一需要更改的。非常感谢你。钩子真是个大鼻子哈哈,钩子很容易,只是角度不同而已。正如创造者丹·阿布拉莫夫所说。“你必须想办法”。此外,如果这个答案有帮助的话,请不要放弃投票,这样也可以帮助其他人!我确实投了赞成票,但我的声誉还不到15。我只是习惯了把组件分类。