React中下拉菜单值传递至隐藏输入框异常问题

问题出在你同时用useState手动控制隐藏输入框的值，又用react-hook-form的register接管输入框，两者状态未同步。react-hook-form维护着独立的表单状态，你的someVar更新后并没有同步到这个内部状态里，导致提交时表单拿不到最新值。

优雅的解决方式是直接用react-hook-form提供的setValue方法更新表单字段，无需额外的useState：

修改后的代码 #

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

const {
    register,
    handleSubmit,
    setValue, // 解构出react-hook-form的setValue方法
    formState: { errors },
  } = useForm({ mode: 'onBlur' });

  const handleFormSubmit = (data) => {
       console.log('提交数据:', data); // 此处可看到hiddenInput的正确值
       console.error('success');
  };

  const handleErrors = (errors) => {
    console.error(errors);
  };

  const options = {
    hiddenInput: {
      required: t('hiddenInput is required'),
    },
  };

  // ...其他逻辑代码

  return (
    <form onSubmit={handleSubmit(handleFormSubmit, handleErrors)}>
         <Select
         options={/* 你的选项数组 */} // 注意此处需传入数组而非字符串
         onChange={(value) => setValue('hiddenInput', value)} // 直接更新表单字段状态
        />
        {/* 隐藏输入框无需手动设置value，register会自动绑定表单状态 */}
        <input
        type="hidden" // 明确标记为隐藏类型
        name='hiddenInput'
        {...register('hiddenInput', options.hiddenInput)}
        />
    <button type="submit">提交</button>
    </form>
  )

方案说明 #

• setValue是react-hook-form内置方法，直接更新表单内部状态，确保提交时能获取到最新选中值。
• 移除了冗余的useState变量，让表单状态完全由react-hook-form管理，避免状态不同步问题。
• 隐藏输入框的value由register自动控制，无需手动绑定，简化了代码逻辑。

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