React select - 下拉列表和输入字段的不同标签

Question

是否可以（默认情况下）为 react-select 下拉选项指定一个标签并使用另一个标签 在选择下拉选项之一后显示在输入字段中。

例如，如果我有以下对象：

{label: "David Smith", selectLabel: "Dave",  value: 1}

默认情况下是否可以让label 显示在下拉列表中，并且在我选择selectLabel 后显示在输入字段中？

说“默认”是指某处是否有道具或允许我分别为下拉列表和输入字段指定值的东西？

所以基本上我希望得到这样的东西：

在选择发生后，我希望在输入字段中显示“Dave”（而不是“David Smith”）：

Answer 1

您可以使用formatOptionLabel 来实现此结果。

<Select
   name="color"
   options={colourOptions}
   formatOptionLabel={(option, { context }) => {
     /* context can be either `menu` or `value`
        menu - dropdown
        value - value displayed
     */
     return context === 'menu' ? option.label : option.color;
   }}
/>

Codesandbox

Docs