如何解决如何在反应中使用表单钩子验证反应选择下拉列表
我是 yup 验证的新手,我正在使用以下选项填充 react-select 下拉列表。现在,当我单击一个按钮尝试验证是否选择了任何值时。但它没有验证。非常感谢任何帮助。
const options = [
{ value: 'active',label: 'Active' },{ value: 'inactive',label: 'In Active' },{ value: 'deleted',label: 'Delete' },];
<Select
defaultValue={options[0]}
isSearchable={false}
className="react-dropdown"
onChange={statusDropdownHandleChange}
classNamePrefix="dropdown"
options={options}
name="status"
{...register("status")}
/>
let schema = yup.object().shape({
status: yup.object().shape({
label: yup.string().required("status is required"),value: yup.string().required("status is required")
})
});
解决方法
验证应该有效,但如果您直接将 Sheet2!A:A = Worksheet 2 column 1
Sheet2!C:C = Worksheet 2 column 3
Sheet2!A:B = Worksheet 2 column 1 & 2
A2 = Worksheet 1 Column 1 first row of data
B2 = Worksheet 1 Column 2 first row of data
与 Select
一起使用,则在选择值/提交表单时会遇到错误/未定义的值,因为 react-hook-form
不公开输入的参考。因此,您需要将 Select
包裹在 Controller 中以注册组件。
为了验证表单,如果您允许 Select
中的 isClearable
中的值将是 Select
而不是 null
,因此还有一种情况需要处理需要在状态验证的末尾添加 {label: undefined,value: undefined}
和 .nullable()
。
验证
.required()
带有 react-select 的表单
const schema = yup.object().shape({
status: yup
.object()
.shape({
label: yup.string().required("status is required (from label)"),value: yup.string().required("status is required")
})
.nullable() // for handling null value when clearing options via clicking "x"
.required("status is required (from outter null check)")
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。