如何使用 React Hook Form 验证选择输入字段？答案

【问题标题】：How to validate select input field using React Hook Form?如何使用 React Hook Form 验证选择输入字段？
【发布时间】：2021-05-25 18:11:28
【问题描述】：

我正在尝试使用 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>
)}

我可能遗漏了什么或做错了什么。

【问题讨论】：

标签： javascript reactjs react-hook-form react-md

【解决方案1】：

我认为您缺少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" />
       }
     />
   );
  }}
/>

【讨论】：