react-select 通过单击组标题添加组中的所有项目

Question

let options = [
  {
    "label": "Group 1",
    "options": [
      {
        "label": "Item1", "value": "1|1"
      },
      {
        "label": "Item2", "value": "1|2"
      },
      {
        "label": "Item3", "value": "1|3"
      }
    ]
  },
  {
    "label": "Group n",
    "options": [
      {
        "label": "Item1", "value": "2|1"
      },
      {
        "label": "Item2", "value": "2|2"
      }
    ]
  }
];

 <Select
       onChange={this.onChange}
       closeMenuOnSelect={false}
       isMulti
       menuIsOpen={true}
       options={options}
  />

onChange 仅针对组的子项触发，在文档中我没有找到属性来设置组标题可点击或其他可以实现此目的的选项，有什么想法吗？

我也试过为这样的群体增加价值

[
  {
    "label": "Group 1",
    "value": [
      "1|1",
      "1|2",
      "1|3"
    ],
    "options": [
      {
        "label": "item1",
        "value": "1|1"
      },
      {
        "label": "item2",
        "value": "1|2"
      },
      {
        "label": "item3",
        "value": "1|3"
      }
    ]
  }
]

但是群组不可点击

Answer 1

是的，这就是 react-select 的工作原理，您不能直接 click/select 加入群组。

但是，为了使组可点击，请在 options 数组内的对象中提供 label 和 value。

像这样

let options = [
  {
    label: "---GROUP 1---",
    value: "1"
  },
  {
    options: [
      {
        label: "Item1",
        value: "1|1"
       ...

这将使该组可点击并select可用。

您的 code is in the codesandbox

的工作副本

另一个可能有用的信息是：

您可以为群组编写自定义组件。这样您就可以附加 onClick 或做其他事情。

<Select
        components={{GroupHeading: () => <div onClick={() => console.log('i am a group and i am clickable .. yay!')}>My Group Heading</div>}}
        onChange={onChange}

====编辑：根据评论中的要求：====

为了 select 在点击组标签时对所有项目进行分组，请执行以下操作：

维持一个状态value例如
为组标签写一个小的自定义组件并附加一个 onClick 它将连接值（状态）
使用 react-select 的 value 属性并提供来自 state

value

编写自定义 onChange 并更新状态，即 value 在项目 select

我已经更新了 codesandbox 工作 copy of code (same link as above)

代码段：

const group1Options = [
  {
    label: "Item1",
    value: "1|1"
  },
  {
    label: "Item2",
    value: "1|2"
  },
  {
    label: "Item3",
    value: "1|3"
  }
];

const group2Options = [
  {
    label: "Item1",
    value: "2|1"
  },
  {
    label: "Item2",
    value: "2|2"
  }
];

const createGroup = (groupName, options, setValue) => {
  return {
    label: (() => {
      return (
        <div
          onClick={() =>
            setValue(value =>
              value.concat(options.filter(grpOpt => !value.includes(grpOpt)))
            )
          }
        >
          {groupName}
        </div>
      );
    })(),
    options: options
  };
};

export default function App() {
  const [value, setValue] = useState([]);
  let options = [
    createGroup("---GROUP 1---", group1Options, setValue),
    createGroup("---GROUP 2---", group2Options, setValue)
  ];

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Select
        // components={{GroupHeading: () => <div onClick={() => console.log('i am a group and i am clickable .. yay!')}>My Group Heading</div>}}
        onChange={option => {
          console.log(option);
          return setValue(option);
        }}
        closeMenuOnSelect={false}
        isMulti
        menuIsOpen={true}
        options={options}
        value={value}
      />
    </div>
  );
}

react-select 通过单击组标题添加组中的所有项目

react-select add all items from group by click on group title

reactjs

react-select