从 react-select 组件中以 react-hook-form 获取值？

Question

我正在尝试在使用 react-hook-form 创建的表单中使用 react-select 组件。我已按照 react-hook-form 网站 here 的说明进行操作，但是当我提交表单时，select 组件的值是 ""（默认值）。

我知道该表单通常可以正常工作，因为使用 ref={register} 输入的其他值可以正常工作。这只是我使用 Controller 的一个值。我是在 Select 组件中遗漏了一个道具还是我在其他地方出错了？

我有一个定义表单的父组件：

<Form id="public-share-form" onSubmit={handleSubmit(onSubmit)}>
   <Controller
    as={<PublicShareNetworkSelect />}
    name="network"
    control={control}
    defaultValue=""
   />
</Form>

然后 Controller 的 as 属性中使用的 react-select 组件的子组件：

return (
   <Select
   closeMenuOnSelect={true}
   options={networks}
   noOptionsMessage={() => "No matching options"}
   defaultValue=""
   className="basic-single"
   classNamePrefix="select"
/>
);

Answer 1

我认为你需要像这样直接使用 Select:

<Controller
  as={
    <Select
      closeMenuOnSelect={true}
      options={networks}
      noOptionsMessage={() => "No matching options"}
      defaultValue=""
      className="basic-single"
      classNamePrefix="select"
    />
  }
  name="network"
  control={control}
  defaultValue=""
/>

从 react-select 组件中以 react-hook-form 获取值？

Getting values from react-select component in react-hook-form?

reactjs

react-select

react-hook-form