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

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

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

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

默认情况下，是否可以在下拉列表中显示

标签

，并且在我做出选择后，在输入字段中显示

选择标签

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

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

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

---

您可以使用

格式选项标签来实现此结果

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

{
/*上下文可以是“菜单”或“值”`
菜单-下拉列表
值-显示的值
*/
返回上下文==“菜单”？option.label:option.color；
}}
/>


您可以使用
格式选项标签来实现此结果

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

{
/*上下文可以是“菜单”或“值”`
菜单-下拉列表
值-显示的值
*/
返回上下文==“菜单”？option.label:option.color；
}}
/>