如何在@ atlaskit / dropdown-menu中访问所选DropdownItemCheckbox的列表

Question

没有DropdownMenu的文档或示例，其中显示了如何获取DropthItemCheckbox项的状态并对其做出反应。一些相关功能似乎已被弃用。现在怎么办？

我希望用户能够看到Jira中定义的sprint，epics和version的列表，并显示板的过滤内容（即复制Backlog屏幕的一些功能）。要做到这一点，用户必须选择他们感兴趣的内容，这样我的后端就可以去做那个选择的工作。

Answer 1

您应该能够通过在每个onClick上放置一个<DropdownItemCheckbox>处理程序并将每个下拉项的选定状态存储在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的开发人员预览