反应选择-下拉列表和输入字段的不同标签

Question

是否有可能（默认情况下）为react-select下拉选项指定一个标签并具有另一个标签选择了一个下拉选项后，将在输入字段中显示。

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

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

默认情况下是否有可能使label显示在下拉列表中，并选择在输入字段中显示selectLabel？

通过说“默认”，我的意思是说某处是否有道具或可以让我分别为下拉列表和输入字段指定值的东西？

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

并且在发生选择之后，我希望在输入字段中显示“戴夫”（而不是“大卫·史密斯”）：

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;
   }}
/>

Docs