Antd：当我的 Select.Option 是一个组件时，如何在 Select 的输入中指定文本

Question

在使用 Antd 时，我发现无法在 Select 的输入中指定文本。
这是我的代码：

val item = {id: id1, name: name1, key1: value1, key2: value2, key3: value3}
<Select.Option value={item.id}>
    <Card>
        <p>key1: {item.key1}</p>
        <p>key2: {item.key2}</p>
        <p>key3: {item.key3}</p>
    </Card>
</Select.Option>

现在当我 select 它与 Select 时，我会在输入字段中得到一个 Card 组件，这很难看。我想在输入字段中显示 item.name，同时在下拉列表中显示 Card 组件。
你们知道怎么处理吗？

Answer 1

在下拉列表中显示 Card 组件时无法在输入字段中显示 item.name。

输入字段和下拉列表中显示的内容必须相同。

输入字段和下拉列表的 item.name 显示方式如下：

import { Select } from 'antd';
const Option = Select.Option;

<Select>
   <Option key={item.id}>{item.name}</Option>
</Select>

Antd：当我的 Select.Option 是一个组件时，如何在 Select 的输入中指定文本

Antd: How to specify the text in the Select's input when my Select.Option is a Component

reactjs

antd