onChange 方法不适用于所有字段答案

【问题标题】：onChange method is not working on all the fieldsonChange 方法不适用于所有字段
【发布时间】：2019-10-14 13:00:11
【问题描述】：

我已经在 useState Hook 中为输入字段定义了初始值，这里是 代码：

const [name, setName] = useState({
        email: "",
        password: "",
        confirmPassword: "",
        storeName: ""
    })

我正在这里访问 Material 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
            }
        ))
}

我不确定，我缺少什么，因此将不胜感激。

【问题讨论】：

你有拼写错误

标签： reactjs react-hooks

【解决方案1】：

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

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

【讨论】：