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

Question

我是 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")
    })
 });

Answer 1

验证应该可以工作，但是如果您直接使用Select 和react-hook-form，则在选择值/提交表单时会遇到错误/值未定义，因为Select 不会公开输入的参考。因此，您需要将Select 与Controller 包裹起来才能注册组件。

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

验证

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)")
});

带有 react-select 的表单

<form onSubmit={handleSubmit(onSubmit)}>
    <Controller
        name="status"
        control={control}
        render={({ field }) => (
        <Select
            // defaultValue={options[0]}
            {...field}
            isClearable
            isSearchable={false}
            className="react-dropdown"
            classNamePrefix="dropdown"
            options={options}
        />
        )}
    />
    <p>{errors.status?.message || errors.status?.label.message}</p>
    <input type="submit" />
</form>

Here is the codesandbox