如何用React Hook Form在下拉切换时保留输入框历史值？

核心思路是单独维护一个状态存储用户手动输入的firstName值，避免被切换到选项b时的默认值覆盖，具体实现步骤如下：

1. 添加状态存储用户自定义输入
   声明一个独立的state变量，专门保存用户手动输入的姓名内容：

   const [userCustomFirstName, setUserCustomFirstName] = useState('');
   

2. 监听输入框的手动输入事件
   给输入框添加onChange监听，在触发React Hook Form默认逻辑的同时，同步更新用户输入状态：

   <Input
      {...register('firstName')}
      type="text"
      onChange={(e) => {
         // 执行React Hook Form的默认注册逻辑
         register('firstName').onChange(e);
         // 保存用户手动输入的原始值
         setUserCustomFirstName(e.target.value);
      }}
   />
   

3. 修改下拉框切换逻辑
   切换回选项a时，将表单的firstName值重置为之前保存的用户自定义内容：

   const salutationChanged = (option: string) => {
      if (option === 'b') {
         setValue('firstName', 'Family');
      } else {
         setValue('firstName', userCustomFirstName);
      }
   }
   

补充说明 #

之前使用getValue()失败，是因为切换到选项b时setValue会异步更新表单状态，此时调用getValue拿到的已经是更新后的"Family"，而非用户之前的输入值。单独维护用户输入状态可以确保我们始终持有用户手动输入的原始值，不受下拉框切换时的默认值干扰。

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