如何使用 yup（和 react-form-hooks）验证 CreatableSelect 组件（multi select）

Question

知道如何最好地做到这一点。到目前为止我找到的答案只涉及单值 react-select components.

这是我正在使用的组件。

      <CreatableSelect
        isClearable
        components={{ ClearIndicator }}
        styles={{ clearIndicator: ClearIndicatorStyles }}
        isMulti
        className='react-select-container'
        classNamePrefix="react-select"
        delimiter=","
        inputId={props.id}
        inputProps={{ name: props.name }}
        placeholder={'Please select from the list or add you own'}
        onChange={handleChange}
        onInputChange={handleInputChange}
        options={props.options}
        required={props.required}
        isOptionDisabled={(option) => isWithinLimit}
        value={selected}
        menuPlacement={props.menuPlacement}
        ref={ref}

    />

if props.name = "个人技能";

这是 yup 架构的一部分

yup.object().shape({
    ...
    personalSkills: yup.string().required()

});

谢谢

Answer 1

假设您的选项采用以下形式：

options = [{
    label: 'string',
    value: 'string'
}]

然后，您可以像这样定义 Yup 架构：

Yup.array()
  .min(2, 'Pick at least two items')
  .of(
    Yup.object().shape({
      label: Yup.string().required(),
      value: Yup.string().required(),
    })
  )

这里有一个例子：https://codesandbox.io/s/jRzE53pqR

如何使用 yup（和 react-form-hooks）验证 CreatableSelect 组件（multi select）

How to validate CreatableSelect component (multi select) with yup (and react-form-hooks)

reactjs

react-select

yup

react-hook-form