我有一个React表单,我不能用useState钩子控制checkbox输入的值。我用其他输入没有这个问题。
我无法将复选框输入值传递给AuthData对象。当您单击“登录”按钮时,控制台应显示一个AuthData对象,其中包含字段{ login:“”,密码:“”,是记住:“”}
import React from 'react'
import { useState } from 'react'
export const AuthForm = ({ handlers }) => {
const [authData, setAuthData] = useState({ login: '', password: '', isRemember: '' })
const changeValue = (event) => {
const { id, value } = event.target
setAuthData((prevAuthData) => ({ ...prevAuthData, [id]: value }))
}
const signIn = () => {
console.log(authData)
}
return (
<form onSubmit={(e) => e.preventDefault()}>
<input
type="text"
id="login"
placeholder="Login/E-mail/Phone"
value={authData.login}
onChange={changeValue}
/>
<input
type="password"
id="password"
placeholder="Password"
value={authData.password}
onChange={changeValue}
/>
<input
type="checkbox"
id="isRemember"
value={authData.isRemember}
onChange={changeValue}
/>
<button onClick={signIn}>Sign in</button>
</form>
)
}
当你改变输入值时,它们的值必须被传递到authValue对象。如果输入了“login”和“password”,它们的值会被传递到authValue对象中,但是如果输入了“isRemember”,这就不起作用了。复选框输入的值不知何故不会被传递到authValue对象中。
2条答案
按热度按时间xwbd5t1u1#
您可以检查输入
type
,并从事件对象中获取checkbox
的checked
值,如下所示vhipe2zx2#
您必须在复选框输入上使用
checked
属性。使用value属性,但是必须修改它以确保它将
true
或false
发送到状态对象我已经添加了一个片段来回应你的评论。
第一个