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

Question

我正在使用AntdSelect组件构建一个自定义组件，它使我能够返回一个对象而不是原始值，并在选择下拉选项中的对象项中显示嵌套值，它工作正常，可以使用以下方法进行验证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}      />

有关更多详细信息，请检查代码沙盒游乐场中的整个代码

Answer 1

我认为问题是由于您的 SprintSelectinnerProps

在下面看看我的 CSB：

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

<Select onChange={props.onChange}>

Answer 2

当组件在控制器内部时，value会向它发送一个道具。而你只是从道具中删除onChangeand 。onBlur

Select将使用这个道具值，但它是一个对象，这就是它不显示标签的原因。

要修复，您可以delete tmp.value;在添加道具之前删除innerProps

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

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