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

发布于 2025-01-17 22:24:33 字数 818 浏览 0 评论 0原文

我想使用分组选项。我想获得一组选定的值。例如，当我选择绿色时，我怎么知道它是一种颜色？

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅笑依然 2025-01-24 22:24:33

如果我正确理解您，您想了解所有选定的选项，同时您也想知道哪个选项属于哪个组。

默认情况下您不能执行此操作，但是您可以自定义组选项和
添加另一个可以指示组参考/名称的键，因此，当onChange将触发回调时，您将获得该选项，并且可以看到组参考/名称。

查看此示例，Live-demo 在这里。

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

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

回复收藏 0 原文

~没有更多了~