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

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

Codesandbox

Docs