如何解决如何使用 React Hook Form 验证选择输入字段?
我正在尝试使用 React Hook Form 验证使用 React MD 中的表单字段制作的表单。文本输入字段工作正常。
但是验证在选择字段上不起作用。代码如下:
<Controller
control={control}
name="salutation"
defaultValue=""
rules={{ required: "Salutation is required" }}
disabled={isSubmitting}
render={(props) => (
<Select
id="salutation"
{...props}
label="Salutation"
options={SALUTATION_ITEMS}
value={salutationValue}
onChange={(e) => handleSalutationChange(e)}
disableLeftAddon={false}
rightChildren={
<RiArrowDownSFill className="dropDownArrow" />
}
/>
);
}}
/>
{errors.salutation && (
<div className="validation-alert msg-error ">
<p>{errors.salutation.message}</p>
</div>
)}
我可能遗漏了什么或做错了什么。
解决方法
我认为您缺少 props.value
和 props.onChange(e)
,您可能不需要 handleSalutationChange(e)
:
<Controller
control={control}
name="salutation"
defaultValue=""
rules={{ required: "Salutation is required" }}
disabled={isSubmitting}
render={(props) => (
<Select
id="salutation"
{...props}
label="Salutation"
options={SALUTATION_ITEMS}
value={props.value} // This one: props.value
onChange={(e) => {
props.onChange(e) // I think you are missing this
handleSalutationChange(e) // NOT Needed ?
}}
disableLeftAddon={false}
rightChildren={
<RiArrowDownSFill className="dropDownArrow" />
}
/>
);
}}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。