如何在反应中使用表单钩子验证反应选择下拉列表

问题描述

我是 yup 验证的新手，我正在使用以下选项填充 react-select 下拉列表。现在，当我单击一个按钮尝试验证是否选择了任何值时。但它没有验证。非常感谢任何帮助。

const options = [
        { value: 'active',label: 'Active' },{ value: 'inactive',label: 'In Active' },{ value: 'deleted',label: 'Delete' },];

<Select
  defaultValue={options[0]}
  isSearchable={false}
  className="react-dropdown"
  onChange={statusDropdownHandleChange}
  classNamePrefix="dropdown"
  options={options}
  name="status"
  {...register("status")}
/>


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

解决方法

验证应该有效，但如果您直接将 Sheet2!A:A = Worksheet 2 column 1 Sheet2!C:C = Worksheet 2 column 3 Sheet2!A:B = Worksheet 2 column 1 & 2 A2 = Worksheet 1 Column 1 first row of data B2 = Worksheet 1 Column 2 first row of data 与 Select 一起使用，则在选择值/提交表单时会遇到错误/未定义的值，因为 react-hook-form 不公开输入的参考。因此，您需要将 Select 包裹在 Controller 中以注册组件。

为了验证表单，如果您允许 Select 中的 isClearable 中的值将是 Select 而不是 null，因此还有一种情况需要处理需要在状态验证的末尾添加 {label: undefined,value: undefined} 和 .nullable()。

验证

.required()

带有 react-select 的表单

const schema = yup.object().shape({
  status: yup
    .object()
    .shape({
      label: yup.string().required("status is required (from label)"),value: yup.string().required("status is required")
    })
    .nullable() // for handling null value when clearing options via clicking "x"
    .required("status is required (from outter null check)")
});

Here is the codesandbox