如何在React中使用React Hook Form验证react-select下拉框

问题根源 #

react-select 是自定义非受控组件，react-hook-form 的 register 方法默认适配原生表单控件，只会收集控件的 value 属性值，不会自动绑定 react-select 的选中对象，所以你虽然传了 {...register("status")}，但实际收集到的 status 字段值和 yup 校验的对象结构不匹配，导致校验不生效。

解决方案 #

使用 react-hook-form 提供的 Controller 组件绑定自定义的 react-select 组件，替代原生的 register 方法，就能正确收集选中值触发 yup 校验。

前置依赖安装 #

如果还没安装校验相关依赖，先执行命令安装：
npm install @hookform/resolvers yup

步骤1：调整表单初始化逻辑 #

import { useForm, Controller } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import Select from 'react-select';

// options保持不变
const options = [
  { value: 'active', label: 'Active' },
  { value: 'inactive', label: 'In Active' },
  { value: 'deleted', label: 'Delete' },
];

// 表单初始化，绑定yup校验和默认值
const { control, handleSubmit, formState: { errors } } = useForm({
  resolver: yupResolver(schema),
  defaultValues: {
    // 把原来写在Select上的defaultValue移到此处，和表单状态同步
    status: options[0]
  }
});

// 表单提交逻辑
const onSubmit = (data) => {
  console.log('表单数据：', data);
};

步骤2：修改Select组件绑定逻辑 #

删除原来的 {...register("status")}，改用Controller包裹：

<Controller
  control={control}
  name="status"
  render={({ field: { onChange, value } }) => (
    <Select
      value={value}
      isSearchable={false}
      className="react-dropdown"
      onChange={(selectedOption) => {
        // 如果原有statusDropdownHandleChange有自定义逻辑，在此处调用即可
        // statusDropdownHandleChange(selectedOption);
        onChange(selectedOption);
      }}
      classNamePrefix="dropdown"
      options={options}
      name="status"
    />
  )}
/>

步骤3：绑定提交按钮和错误提示 #

你的触发校验按钮需要绑定handleSubmit方法才能触发表单校验：

<form onSubmit={handleSubmit(onSubmit)}>
  {/* 上述Select组件 */}
  <button type="submit">提交</button>
  {/* 校验失败提示 */}
  {errors.status && <p>{errors.status.message}</p>}
</form>

yup校验规则说明 #

你原有写的嵌套对象校验逻辑可以正常使用，如果不需要分别校验label和value，也可以简化成直接校验对象是否存在：

let schema = yup.object().shape({
  status: yup.object().required("status is required")
});

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