javascript - 使用 react-select 的多类别下拉菜单

Question

我想将 react-select 用于多类别下拉列表。我的用例是能够从每个类别中最多选择一个选项。我已经解释了下面给定的示例，我希望从每个类别中最多选择一个项目。所以我们可能有一个选择，如 C1I1、C2I3 和 C3I1。我的项目是使用 react-select v2.4.4 和 react v15.6.2 和 material-ui。谁能让我知道如何实现此功能。另外，如果这已经实施或回答，请指导我。

1. 第一类

• C1I1
• C1I2
• C1I3

2. 第 2 类

• C2I1
• C2I2
• C2I3
• C2I4

3. 第 3 类

• C3I1
• C3I2

标签： javascriptreactjsmaterial-uireact-select

Answer 1

创建了一个参考笔。 https://codepen.io/chris495b/pen/QWKmXKE

在实现选择组件时，请不要忘记添加 isMulti 属性，并在链接中共享的格式中包含数据以进行分组。

<Select
        onChange={this.handleChange}
        isMulti
        defaultValue={colourOptions[1]}
        options={groupedOptions}
        formatGroupLabel={formatGroupLabel}
      />