我已经为useState Hook中的输入字段定义了初始值,这是代码:
const [name, setName] = useState({
email: "",
password: "",
confirmPassword: "",
storeName: ""
})
并且我正在此处访问“材料UI”输入字段中的“值”
<FormControl className={classes.formControl} fullWidth={true} variant="filled" >
<InputLabel htmlFor="component-filled">Email</InputLabel>
<FilledInput id="component-filled" onChange={handleChange} name="email" value={name.email} />
{error.emailError}
</FormControl>
<FormControl className={classes.formControl} fullWidth={true} variant="filled">
<InputLabel htmlFor="component-filled">Password</InputLabel>
<FilledInput id="component-filled" onChange={handleChange} type="password" name="password" value={name.password} />
{error.passwordError}
</FormControl>
<FormControl className={classes.formControl} fullWidth={true} variant="filled">
<InputLabel htmlFor="component-filled">Confirm Password</InputLabel>
<FilledInput id="component-filled" onChange={handleChange} type="password" name="confirmpassword" value={name.confirmPassword} />
{error.confirmPasswordError}
</FormControl>
<FormControl className={classes.formControl} fullWidth={true} variant="filled" >
<InputLabel htmlFor="component-filled">Store Name</InputLabel>
<FilledInput id="component-filled" onChange={handleChange} name="storename" value={name.storeName} />
{error.usernameError}
</FormControl>
我遇到的问题是我在其他三个字段中键入了“ Email
”,“ Password
”和“ storename
” onChange可以正常工作,但是不接受任何值表示“ Confirmpassword
”,表示我无法在确认密码字段中输入。
这是我的HandleChange
方法:
const handleChange = e => {
e.persist()
setName(name => (
{
...name,
[e.target.name]: e.target.value
}
))
}
我不确定,我缺少什么,因此非常感谢您的帮助。
答案 0 :(得分:4)
您的输入名称为confirmpassword
,但您输入的状态名称为confirmPassword
。更改一个以匹配另一个,它应该可以工作。
<FilledInput
id="component-filled"
onChange={handleChange}
type="password"
name="confirmPassword"
value={name.confirmPassword}
/>