React-Select 分组选项：如何设置和提取组标题的值并将其附加到选项

Question

我一直在使用React选择组件，并且一直在使用分组选项来显示颜色和风味的组以及它们各自的选项可供选择：

import React, { CSSProperties } from "react";

import Select from "react-select";

const colorOptions = [
  "Red",
  "Blue",
  "Green",
  "Yellow",
  "Orange",
  "Purple",
  "Brown"
].map((o) => ({
  value: o.replace(" ", "_").toLowerCase(),
  label: o
}));

const flavorOptions = [
  "Vanilla", 
  "Chocolate", 
  "Strawberry", 
  "Cookies"
].map((o) => ({
    value: o.replace(" ", "_").toLowerCase(),
    label: o
  }));

const groupedOptions = [
  {
    label: "Colors",
    options: colorOptions
  },
  {
    label: "Flavors",
    options: flavorOptions
  }
];

export default () => (
  <Select options={groupedOptions} onChange={(e) => console.log(e)} />
);

通过这样做，我们有以下分组的数据结构：

label: "Flavors"
options: Array(4)
    0: {label: "Vanilla", value: "vanilla"}
    1: {label: "Chocolate", value: "chocolate"}
    2: {label: "Strawberry", value: "strawberry"}
    3: {label: "Cookies", value: "cookies"}

但是，只要React选择组件的控制台日志激活所选值的ONCHANGE，我们只提供此{value：“ vanilla”，label：“ vanilla”}

我想知道最好是最好的将上grouplabel（颜色或口味）连接到此对象的方法，或者能够拔出此值并将其重新映射到如下：

{ 
  label: "Flavors"
  options: {
  value: "vanilla",
  label: "Vanilla"
  }
}