onChange方法不适用于所有字段

时间:2019-10-14 13:00:11

标签: reactjs react-hooks

我已经为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
            }
        ))
}

我不确定,我缺少什么,因此非常感谢您的帮助。

1 个答案:

答案 0 :(得分:4)

您的输入名称为confirmpassword,但您输入的状态名称为confirmPassword。更改一个以匹配另一个,它应该可以工作。

<FilledInput 
  id="component-filled" 
  onChange={handleChange} 
  type="password" 
  name="confirmPassword" 
  value={name.confirmPassword} 
/>