react-hook-form使用watch如何获取select的显示文本而非value值

react-hook-form 提供的 watch 方法默认遵循原生表单的取值逻辑，仅会读取表单控件的 value 属性，无法直接获取 select 下拉框选中项的显示文本，官方也没有提供对应的内置能力。你可以通过以下两种常见方案实现需求：

方案1：维护下拉选项常量（最推荐） #

把下拉的选项抽成统一的常量数组，拿到 watch 返回的 value 后，直接匹配数组得到对应显示文本。这种方案侵入性最低，也便于后续维护下拉选项。

// 统一定义下拉选项，所有地方复用
const dropdownOptions = [
  { value: "1", label: "Cheese" },
  { value: "2", label: "Ham" }
]

// 组件内使用
const { watch } = useForm()
const { myDropDown } = watch()
// 匹配得到显示文本
const selectedText = dropdownOptions.find(item => item.value === myDropDown)?.label || ''

// 渲染select时直接遍历常量数组
<select name="myDropDown">
  {dropdownOptions.map(option => (
    <option key={option.value} value={option.value}>{option.label}</option>
  ))}
</select>

方案2：使用Controller封装存完整信息 #

如果你需要直接让表单值里同时包含value和显示文本，可以用react-hook-form的Controller组件包裹select，自定义onChange逻辑把选中项的文本一起存入表单值：

import { useForm, Controller } from "react-hook-form"

// 组件内
const { control, watch } = useForm()
const myDropDown = watch("myDropDown")
// 此时myDropDown是{value: '1', label: 'Cheese'}结构，直接取myDropDown.label就是显示文本

<Controller
  name="myDropDown"
  control={control}
  defaultValue={{value: '', label: ''}}
  render={({ field }) => (
    <select 
      value={field.value.value}
      onChange={(e) => {
        const selectedOption = e.target.selectedOptions[0]
        field.onChange({
          value: selectedOption.value,
          label: selectedOption.text
        })
      }}
    >
      <option value="1">Cheese</option>
      <option value="2">Ham</option>
    </select>
  )}
/>

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