如何在反應選擇中獲取一組選定值

Question

我想使用分組選項。 我想獲得一組選定的值。 例如，當我選擇綠色時，我怎么知道它是一種顏色？

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

顏色 --> 紅、黃、綠

風味 --> 香草、巧克力

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

如果我對你的理解是正確的，你想知道所有選擇的選項，同時你還想知道哪個選項屬於哪個組。

默認情況下您不能這樣做，但是您可以自定義您的組選項並添加另一個可以指示組引用/名稱的鍵，這樣當onChange回調將被觸發時，您將獲得該選項並且您可以看到您的組引用/名稱。

在此處查看此示例和現場演示。

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