如何使用 yup和 react-form-hooks验证 CreatableSelect 组件多选

问题描述

知道如何最好地做到这一点。到目前为止，我发现的答案仅与单值 react-select 组件有关。

这是我正在使用的组件。

      <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 = "personalSkills";

这是 yup 架构的一部分

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

});

谢谢

解决方法

假设您的选项是以下形式：

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