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

Question

是否可以（默认情况下）为反应选择下拉选项指定一个标签，并在选择其中一个下拉选项后在输入字段中显示另一个标签。

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

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

代码沙箱

文档