Как проверить правильность выбора реакции?

Question

Я нашел подтверждение yup для реакции-выбора (множественный выбор). Пожалуйста, обратитесь по ссылке выбрать несколько элементов проверки реагирования-выбора в yup. Но мне не нужна проверка множественного выбора с использованием yup. Мне нужна базовая проверка для реакции-выбора используя yup. Я пытался, но мне не удалось реализовать проверку правильного выбора с использованием yup.

Как я могу добиться этого с помощью yup. Пожалуйста, помогите мне решить эту проблему.

Заранее спасибо. Лучший ответ будет оценен.

Answer 1

https://codesandbox.io/s/03zxq01okp

• менять topics в topic
• изменить тип проверки темы с массива на строку
  • замещать max с required
  • добавлять ensure по умолчанию пустая строка для обработки выбранного очищаемого значения ( https://github.com/jquense/yup)
• менять mapPropsToValuestopic тип из массива в строку
• использование value из topic для полезной нагрузки

Diff:

15,22c15,17
<     topics: Yup.array()
<       .max(1, "Pick at least 3 tags")
<       .of(
<         Yup.object().shape({
<           label: Yup.string().required(),
<           value: Yup.string().required()
<         })
<       )
---
>     topic: Yup.string()
>       .ensure()
>       .required("Topic is required!")
26c21
<     topics: []
---
>     topic: ""
31c26
<       topics: values.topics.map(t => t.value)
---
>       topic: values.topic.value
72c67
<         value={values.topics}
---
>         value={values.topic}
75,76c70,71
<         error={errors.topics}
<         touched={touched.topics}
---
>         error={errors.topic}
>         touched={touched.topic}
107c102
<     this.props.onChange("topics", value);
---
>     this.props.onChange("topic", value);
112c107
<     this.props.onBlur("topics", true);
---
>     this.props.onBlur("topic", true);
118c113
<         <label htmlFor="color">Topics (select at least 3) </label>
---
>         <label htmlFor="color">Topic</label>
156c151
<       <code>topics</code> that uses Jed Watson's{" "}
---
>       <code>topic</code> that uses Jed Watson's{" "}