Question

我正在使用react-select及其变体react-multiselect-checkbox。我想使组部分可折叠，但一直无法弄清楚如何。

我制作了一个自定义组标题组件，其中添加了下插入符号。但是，我无法找出单击此项目时向特定组添加“活动”类的最佳方法。我当时计划仅使用CSS根据活动内容显示/隐藏组div。

https://codesandbox.io/s/9o8o1n90mr

我希望当单击插入符号时，组下的适当项目将相应地显示/隐藏。

Answer 1

关于变异状态有些古怪，但是沿着这些思路有什么？ https://codesandbox.io/s/busy-sara-9wssn

基本上提供Group而不是GroupHeading并根据展开状态显示/隐藏子项

Answer 2

您可以创建自定义GroupHeader并注册点击事件，并在点击处理程序中编写登录信息以隐藏和显示组下的选项

检查以下沙箱。我在那边创建了一个示例示例。

https://codesandbox.io/s/gp4i4

因此，基本上，您将编写以下代码来创建自定义GroupHeader组件，并且，在点击事件组下隐藏和显示选项的逻辑。

// handle options group header click event
// hide and show the options under clicked group
const handleHeaderClick = id => {
  const node = document.querySelector(`#${id}`).parentElement
    .nextElementSibling;
  const classes = node.classList;
  if (classes.contains("collapsed")) {
    node.classList.remove("collapsed");
  } else {
    node.classList.add("collapsed");
  }
};

// Create custom GroupHeading component, which will wrap
// react-select GroupHeading component inside a div and
// register onClick event on that div
const CustomGroupHeading = props => {
  return (
    <div
      className="group-heading-wrapper"
      onClick={() => handleHeaderClick(props.id)}
    >
      <components.GroupHeading {...props} />
    </div>
  );
};

这不是最佳解决方案，但它可以工作。

我也写了一个博客，看看

https://www.chintanradia.com/blog/react-select-collapsible-group/#collapsible-grouped-options

有没有办法使反应选择具有可折叠的基团？

2 个答案: