如何在@atlaskit/下拉菜单中访问所选DropdownItemCheckboxes的列表

Question

目前还没有关于DropdownMenu的文档或示例来说明如何获取DropdownItemCheckbox项的状态修改并对其做出反应。一些相关的功能似乎已被弃用。现在是怎么做的呢？

我希望用户能够看到在Jira中定义的冲刺，史诗和版本的列表，并显示板的过滤内容(即复制积压屏幕的一些功能)。要做到这一点，用户必须选择他们感兴趣的内容，这样我的后端就可以在该选择上执行它的工作。

Answer 1

您应该能够通过在每个<DropdownItemCheckbox>上放置一个onClick处理程序并将每个下拉项的选定状态存储在React状态中来跟踪项的选择/取消选择- https://atlaskit.atlassian.com/packages/core/dropdown-menu似乎没有记录这一点

我在https://codesandbox.io/s/9jqyk1pw5o上做了一个快速的现场演示，代码也在下面。

import React from "react";
import { render } from "react-dom";
import Dropdown, {
  DropdownItemCheckbox,
  DropdownItemGroupCheckbox
} from "@atlaskit/dropdown-menu";
import "@atlaskit/css-reset";

class App extends React.Component {
  state = {
    selectedItems: ["js"]
  };

  handleSelection = id => () => {
    const { selectedItems } = this.state;
    if (selectedItems.includes(id)) {
      this.setState({
        selectedItems: selectedItems.filter(item => item != id)
      });
    } else {
      this.setState({
        selectedItems: [...selectedItems, id]
      });
    }
  };

  render() {
    const { selectedItems } = this.state;
    return (
      <div style={{ padding: 40 }}>
        <p>Selected items: {selectedItems.join(", ")}</p>
        <Dropdown defaultOpen triggerType="button" trigger="Drop menu">
          <DropdownItemGroupCheckbox id="languages2" title="Languages">
            {["js", "java", "ruby"].map(id => (
              <DropdownItemCheckbox
                id={id}
                key={id}
                isSelected={selectedItems.includes(id)}
                onClick={this.handleSelection(id)}
              >
                {id}
              </DropdownItemCheckbox>
            ))}
          </DropdownItemGroupCheckbox>
        </Dropdown>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

还有一个选择组件https://atlaskit.atlassian.com/packages/core/select的开发者预览版