时间戳

首页 > 解决方案 > onChange 方法不适用于所有字段

reactjs - onChange 方法不适用于所有字段

问题描述

我在 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
            }
        ))
}

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

标签： reactjsreact-hooks

解决方案

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

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

推荐阅读