如何在react-hook-form中用隐藏输入框传递动态薪资数据

针对你遇到的隐藏输入框无法动态更新薪资值的问题，核心是要把Redux中动态变化的salaryAmount同步到React Hook Form的表单状态里，以下是两种实用解决方式：

方法一：用setValue手动同步状态 #

1. 从useForm中解构出setValue方法：

const { register, setValue } = useForm();

2. 新增监听salaryAmount变化的useEffect，薪资更新时同步到表单的salary字段：

useEffect(() => {
  if (salaryAmount) {
    setValue('salary', salaryAmount);
  }
}, [salaryAmount, setValue]);

3. 隐藏输入框保留register绑定即可，无需手动写value：

<input hidden {...register('salary')} />

方法二：用Controller组件适配外部状态 #

Controller是React Hook Form专门用于对接外部状态（如Redux、Context）的组件，能自动同步状态变化：

1. 导入Controller：

import { Controller, useForm } from 'react-hook-form';

2. 从useForm中解构出control：

const { control } = useForm();

3. 用Controller包裹隐藏输入框，绑定Redux的salaryAmount：

<Controller
  name="salary"
  control={control}
  render={({ field }) => (
    <input hidden {...field} value={salaryAmount} />
  )}
/>

原问题原因说明 #

之前直接给输入框设value会导致半受控状态：React Hook Form的register会接管输入框的状态管理，外部salaryAmount更新时，表单内部状态未同步，所以只会保留第一次的值。上述两种方法都是主动将Redux的薪资状态同步到表单状态中，确保提交时能拿到最新值。

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