Javascript 如何使用React钩子表单验证select输入字段?

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}

我正在尝试使用React Hook form验证使用中的表单字段生成的表单。文本输入字段工作正常

但是,验证在选择字段上不起作用。代码如下:

<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" />
       }
     />
   );
  }}
/>