如何在反应选择中获取一组选定值

Question

I want to use grouped options. I want to get group of selected value. For example when I selected green, how can I know it is a color?

sandbox: https://codesandbox.io/s/codesandboxer-example-forked-x3l2c4?file=/example.tsx

Color --> red, yellow, green

Flavor --> Vanilla, Chocolate

import React, { Fragment } from 'react';

import Select, { components, MenuProps } from 'react-select';
import {
  ColourOption,
  colourOptions,
  FlavourOption,
  GroupedOption,
  groupedOptions,
} from './docs/data';

function onChangeHandler(val){
  console.log("val:" ,val)
}


export default () => (
  <Select<ColourOption | FlavourOption, false, GroupedOption>
    defaultValue={colourOptions[1]}
    options={groupedOptions}
    onChange={onChangeHandler}
  />
);

Answer 1

If I understood you correctly you want to know about all selected options and at the same time you also want to know which option belongs to which group.

You can not do this by default, however you can customize your group options and add another key which can indicate group reference/name so this way when onChange callback will be triggered you will get that option and you can see your group reference/name.

Check out this example and live-demo here .

import React from "react";

import Select from "react-select";
import {
  ColourOption,
  FlavourOption,
  GroupedOption,
  groupedOptions
} from "./docs/data";

function onChangeHandler(val, meta) {
  console.log(val, "val");
  const selectedOptions = val;
  let goupedSelected = new Map();
  selectedOptions.forEach((option) => {
    const { groupName: key } = option;
    const found = goupedSelected.get(key);
    if (found) {
      found.options = [...found.options, option];
    } else {
      goupedSelected.set(key, {
        groupName: key,
        options: [option]
      });
    }
  });
  console.log([...goupedSelected.values()]);
}

export default () => (
  <Select<ColourOption | FlavourOption, true, GroupedOption>
    options={groupedOptions}
    onChange={onChangeHandler}
    isMulti={true}
  />
);