Quiero usar opciones agrupadas. Quiero obtener un grupo de valor seleccionado. Por ejemplo, cuando seleccioné verde, ¿cómo puedo saber que es un color?
caja de arena: https://codesandbox.io/s/codesandboxer-example-forked-x3l2c4?file=/example.tsx
Color --> rojo, amarillo, verde
Sabor --> Vainilla, 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} /> );Si lo entendí correctamente, desea conocer todas las opciones seleccionadas y, al mismo tiempo, también desea saber qué opción pertenece a qué grupo.
No puede hacer esto de forma predeterminada, sin embargo, puede personalizar las opciones de su grupo y agregar otra clave que puede indicar la referencia/nombre del grupo, de modo que cuando se active la devolución de llamada onChange , obtendrá esa opción y podrá ver la referencia/nombre de su grupo.
Mira este ejemplo y la demostración en vivo aquí .
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} /> );