如何使用React Hook Form实现React MD Select字段校验

你遇到的Select校验失效、选中选项后仍持续提示必填错误，本质是React Hook Form（以下简称RHF）没有真正接收到Select字段的更新值，校验逻辑始终读取到初始的空字符串默认值，和React MD的Select组件的参数传递逻辑不匹配。

• 没有正确对接React MD Select的参数返回结构：React MD的Select的onChange回调不会返回原生input事件结构，而是直接传出选中的目标值，很多人照搬原生input的写法，把整个事件对象传给RHF的onChange方法，导致RHF存储的字段值为无效对象，校验时判定为空
• 手动覆写了Controller注入的value和onChange逻辑：没有使用render方法里自带的field参数，自己给Select绑定了本地状态的空值，导致RHF始终追踪不到组件的值变化
• 校验规则匹配逻辑不兼容：如果Select选项的value是数字等非字符串类型，但字段默认值是空字符串，required规则会因为值类型不匹配，永远判定字段为空
• 没有绑定RHF的ref引用：React MD的Select需要通过ref和RHF建立字段关联，漏传ref会导致RHF无法正确同步字段状态

用Controller封装Select时，不要自行手动绑定value和onChange，要直接透传Controller注入的field参数：

<Controller
  control={control}
  name="salutation"
  defaultValue=""
  rules={{ 
    required: "称谓为必填项",
    // 补充兜底校验，避免类型不匹配问题
    validate: (val) => val !== "" || "称谓为必填项"
  }}
  render={({ field: { onChange, value, ref } }) => (
    <Select
      // 直接使用Controller注入的参数，不要自行覆写
      ref={ref}
      value={value}
      onChange={(selectedValue) => onChange(selectedValue)}
      label="称谓"
    >
      <MenuItem value="mr">先生</MenuItem>
      <MenuItem value="ms">女士</MenuItem>
    </Select>
  )}
/>

如果调整后仍有异常，可以在onChange回调中打印接收到的参数，确认用户选择选项时，传给RHF的是不是正确的选中值：

onChange={(selectedValue) => {
  console.log('用户选中的值：', selectedValue)
  onChange(selectedValue)
}}

如果打印结果显示传入的值是组件实例、事件代理对象而非实际的选项值，调整取值层级后即可让校验逻辑正常运行。

注意：如果使用的是React MD v4及更早版本，Select的onChange回调返回结构为(event, selectedValue)，此时需要取第二个参数作为传入RHF的实际值，不要直接传整个event对象。

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