使用带有react钩子形式的寄存器时，输入文本不再可编辑

Question

我试图设置react fook表单来验证我的表单，但当我在文本输入(在我的情况下是用户名输入(上使用register函数时，该输入不再可编辑，我不能在里面键入任何内容。

const {register, handleSubmit, formState: { errors }} = useForm();
const [username, setUsername] = useState('');
.....
  <form onSubmit={handleSubmit(onSubmit)}>
            <label htmlFor="username">Username : </label>
            <input type="text" value={username}
              onChange={e => setUsername(e.target.value)}
             {...register('username', { required: 'Please, type in your username' })}
                    />
            {errors.username && <span style={{color: 'red'}}><br/>{errors.username.message}</span>}
             <br/>
             <label htmlFor="password">Password : </label>
             <input type="password" value={password} onChange={e => setPassword(e.target.value)}/>
             <br/>
            <button type="submit">Login</button>
  </form>

Answer 1

好的，我终于自己找到了解决方案。

由于react钩子形式库的版本7；onChange；寄存器内部函数如下：

<input type="text" value={username} {...register('username', {
    required: 'Please, type in your username',
    onChange: e => setUsername(e.target.value)
    })}/>