React-Hook-Form移动端切换输入框时内容消失问题求助

嘿，我之前在React-Hook-Form里遇到过一模一样的移动端输入问题，大概率是register的用法不对导致的。咱们一步步来解决：

1. 修正React-Hook-Form的register用法 #

你现在手动给input设置了name属性，然后单独传ref={register}，这不是React-Hook-Form的正确姿势。register函数接收字段名作为参数，会返回包含name、ref等必要属性的对象，应该用扩展运算符{...register('字段名')}把这些属性绑定到input上，而不是手动写name。

比如你的用户名输入框要改成这样：

<input 
  className={errors.userName && 'alertInput'} 
  type="text" 
  autoComplete="on" 
  {...register('userName')} 
/>

把email、密码、重复密码的输入框都改成这种写法，删掉手动加的name属性。

2. 修正密码输入框的type属性 #

密码输入框应该用type="password"而不是type="text"，这不仅符合语义，还能避免移动端浏览器一些奇怪的输入行为：

<input 
  className={errors.password ? 'alertInput' : 'passwordColor'} 
  type="password" 
  autoComplete="off" 
  placeholder="At least 6 characters" 
  {...register('password')} 
/>

重复密码框也记得设置type="password"哦。

3. 关联label和input（可选但推荐） #

给每个input加个id属性，然后给对应的label设置htmlFor属性，这样点击label就能直接聚焦到输入框，提升移动端的交互体验：

<label htmlFor="userName"> Your name </label>
<input 
  id="userName"
  className={errors.userName && 'alertInput'} 
  type="text" 
  autoComplete="on" 
  {...register('userName')} 
/>

为什么这样能解决问题？ #

当你手动设置name又单独传ref时，React-Hook-Form可能在移动端浏览器的重渲染过程中，无法正确跟踪输入控件的状态，导致切换输入框时内容暂时消失。用{...register('字段名')}确保了所有必要的属性都被正确绑定，让表单控件的状态始终被React-Hook-Form妥善管理，PC和移动端的表现就能一致了。

修改完代码后测试一下，应该就能解决你遇到的问题啦！

内容的提问来源于stack exchange，提问作者Jen