reactjs - 如何访问@atlaskit/dropdown-menu 中选定的 DropdownItemCheckboxes 列表

Question

没有关于DropdownMenu的文档或示例显示如何获取并响应对 DropdownItemCheckbox 项目状态的修改。一些相关功能似乎已被弃用。现在这是如何完成的？

我希望用户能够看到 Jira 中定义的 sprint、史诗和版本列表，并显示板的过滤内容（即复制 Backlog 屏幕的某些功能）。要做到这一点，用户必须选择他们感兴趣的内容，这样我的后端就可以完成该选择。

Answer 1

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

我在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"));

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