如何解决如何使用单个反应选择进行验证?
我有一个使用单值反应选择创建的必需选择菜单。 如果用户没有从选择菜单中选择任何选项并点击保存按钮,我想显示错误。
下面是我的代码,
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 举报,一经查实,本站将立刻删除。