Javascript 如何使用React钩子表单验证select输入字段?
我正在尝试使用React Hook form验证使用中的表单字段生成的表单。文本输入字段工作正常 但是,验证在选择字段上不起作用。代码如下:Javascript 如何使用React钩子表单验证select输入字段?,javascript,reactjs,react-hook-form,react-md,Javascript,Reactjs,React Hook Form,React Md,我正在尝试使用React Hook form验证使用中的表单字段生成的表单。文本输入字段工作正常 但是,验证在选择字段上不起作用。代码如下: <Controller control={control} name="salutation" defaultValue="" rules={{ required: "Salutation is required" }} disabled={isSubmitting}
<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" />
}
/>
);
}}
/>
(
HandlesValuationChange(e)}
disableLeftAddon={false}
右翼儿童={
}
/>
);
}}
/>
即使用户选择了以下值,错误仍然存在:
{errors.salutation && (
<div className="validation-alert msg-error ">
<p>{errors.salutation.message}</p>
</div>
)}
{errors.saltation&&(
{errors.sallation.message}
)}
我可能遗漏了什么或做了什么错事。我认为您缺少了
道具.值和道具.一旦更改(e)
,您可能不需要手柄评估更改(e)
:
(
{
props.onChange(e)//我想你错过了这个
handleSalutationChange(e)//不需要?
}}
disableLeftAddon={false}
右翼儿童={
}
/>
);
}}
/>
<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" />
}
/>
);
}}
/>