如何使用单个反应选择进行验证？

问题描述

我有一个使用单值反应选择创建的必需选择菜单。 如果用户没有从选择菜单中选择任何选项并点击保存按钮，我想显示错误。

下面是我的代码，

const validationSchema = Yup.object().shape({
    [DESCRIPTION_KEY]: Yup.string(),[NAME_KEY]: Yup.string()
        .max(256,'The name should not be longer than 256 characters')
        .required('Please fill out this field.'),});

const options = [
    { value: 'option1',label: 'option1' },{ value: 'option2',label: 'option2' },{ value: 'option3',label: 'option3'},];
const Parent= ({ formikBag }: { formikBag: FormikProps}) => {
    const handleSave = () => {
        const promiseArr = formFields.map(field =>
            validationSchema.validateAt(field,values!).catch(e => e)
        );
        const validationsArr = await Promise.all(promiseArr);
        const errorsArr = validationsArr.filter(
            field => field instanceof ValidationError
        );

        if (!isEmpty(errorsArr)) {
            errorsArr.forEach(fieldError => {
                setFieldTouched && setFieldTouched(fieldError.path,true,true);
            });
            return;
        }
        return (
            <>
                <FormField
                    label="Name" 
                    fieldId={NAME_KEY}
                    required
                 />
                 <FormField
                     as="textarea"
                     label="Description"
                     fieldId={DESCRIPTION_KEY}
                 />
                 <FormField label="single value select menu *" fieldId= 
                     {SINGLE_SELECT}>
                     <Select //uses react select
                         id={field.name}
                         inputId={field.name}
                         onChange={(option: SelectOption) =>
                             form.setFieldValue(field.name,option.value)
                         }
                         options={options}
                         placeholder="Select single option"
                         value={options.filter(option => option.value === 
                             field.value)}
                         />
                     )}
                 </FormField>
                 <button onClick={handleSave}>Save</button>
             </>
         );
     }

我不确定如何对 react select 单个值进行验证。有人可以帮我解决这个问题吗？谢谢。我刚开始使用 react 和 yup 验证。

编辑 以下是我尝试过的

const validationSchema = Yup.object().shape({
    [DESCRIPTION_KEY]: Yup.string(),[SINGLE_SELECT]: Yup.string()
        .required('Please selection an option');
});

但这不起作用。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）