使用react-hook-form的Controller组件不允许自定义Antd Select显示标签

Question

我正在使用 Antd Select 组件来构建自定义组件，该组件使我能够返回对象而不是原始值，并在选择的对象项中显示嵌套值下拉选项，效果很好，可以使用react-hook-form进行验证：

<Form.Item ... >
  <SpringSelect style={{ width: "200px" }} options={departments} placeholder="Department 2"
            name="department2"  onChange={e => {setValue("department2", e);}}/>

</Form.Item>

这也可以与Controller组件一起使用，但是 它不会在选择输入中显示标签 ：

<Controller as={<SpringSelect style={{ width: "200px" }} />}
            placeholder="Department 1" name="department1" options={departments}
            onChange={([e]) => {return { value: e };}} control={control}      />

有关更多详细信息，请在codesandbox游乐场中查看整个代码

Answer 1

我认为问题是由于您的SprintSelect innerProps

在下面查看我的CSB：

https://codesandbox.io/s/suspicious-platform-tlr55

<Select onChange={props.onChange}>

Answer 2

当组件位于控制器内部时，将向其发送一个value道具。您只是从道具中删除了onChange和onBlur。

Select将使用此prop值，但这是一个对象，这就是为什么它不显示标签的原因。

要解决此问题，您只需删除delete tmp.value;，然后再将道具添加到innerProps

示例：https://codesandbox.io/s/vibrant-river-8r4dt

我放置了一个console.log，如您所见department1有一个value字段

Answer 3

从初始innerProps中删除值，无法解决重置或设置表单初始值（使用reset）的问题。

您必须为自定义选择（value）定义defaultValue和SpringSelect道具

对于受控选择，它将正常工作，对于重置， 但是不受控制的您必须使用watch钩形函数来显示初始值

请参见下面的condeSande框：