React Hook Form疑问：为何textarea需用Controller包裹而input无需？

首先明确：这和textarea/input是否是受控组件无关，两者都是原生表单元素，本质上不存在受控/非受控的天然区别，问题出在React Hook Form对两种元素的处理逻辑及场景适配性上。

现象回顾 #

• 原生input通过register方法即可正常被React Hook Form捕获值并校验：

<input
  {...register('Input', {
    validate: { maxLength: (value: string) => value.length >= 1 }
  })}
  placeholder="input"
  onPaste={e => replaceHttps(e)}
/>

• 但textarea用同样的register方法时，无法被获取值，必须用Controller组件包裹才能正常工作：

<Controller
  name="TextArea"
  control={control}
  rules={{
    required: true,
    validate: {
      maxLength: (value: string) => value.length >= 1,
    },
  }}
  render={({ field: { onChange, value } }) => (
    <textarea
      cols={90}
      placeholder="Placeholder"
      rows={4}
      onChange={onChange}
      value={value}
    />
  )}
/>

核心原因解析 #

1. register的工作逻辑限制
   register方法的本质是给表单元素自动绑定name、onChange、value等属性，通过监听元素的输入事件同步值到表单状态。但textarea在React中的值传递方式（默认可通过子节点内容设置）和input略有不同，部分React Hook Form版本对textarea的事件监听绑定存在兼容性问题，导致register无法正确捕获textarea的输入变化。

2. 自定义逻辑的干扰
   如果你的textarea存在自定义的事件处理（比如类似input的onPaste这类额外操作），可能会覆盖或干扰register自动绑定的onChange事件，导致值无法同步。而Controller是React Hook Form专门封装的“状态协调层”，它会手动接管value和onChange的绑定，强制同步表单状态与组件值，不受自定义逻辑的干扰。

3. 尝试不用Controller的解决方案
   如果想尝试让textarea直接用register工作，可以确保没有覆盖register返回的核心属性：

<textarea 
  {...register('TextArea', {
    required: true,
    validate: { maxLength: (value: string) => value.length >= 1 }
  })}
  cols={90}
  placeholder="Placeholder"
  rows={4}
/>

如果还是不行，建议升级React Hook Form到最新稳定版，新版本通常修复了这类元素兼容问题。

内容的提问来源于stack exchange，提问作者Taiwan No.1