提交选中的 Atlaskit Dropdown(@atlaskit/dropdown-menu) 菜单复选框，点击项目

Question

我正在使用@atlaskit/dropdown-menu ( https://atlaskit.atlassian.com/packages/core/dropdown-menu )。 我想在Item单击时提交一个小表单，我需要提交DropdownItemCheckbox值。

这是渲染所需组件的代码： https : //codesandbox.io/s/py8qoo64mq

import React from "react";
import Dropdown, {
  DropdownItemCheckbox,
  DropdownItemGroupCheckbox,
  DropdownItem
} from "@atlaskit/dropdown-menu";

export default () => (
  <Dropdown defaultOpen triggerType="button" trigger="Drop menu">
    <DropdownItemGroupCheckbox id="languages2" title="Languages">
      <DropdownItemCheckbox defaultSelected id="js-check">
        JavaScript
      </DropdownItemCheckbox>
      <DropdownItemCheckbox id="java">Java</DropdownItemCheckbox>
      <DropdownItemCheckbox defaultSelected id="ruby">
        Ruby
      </DropdownItemCheckbox>
    </DropdownItemGroupCheckbox>
    <DropdownItem>Submit</DropdownItem>
  </Dropdown>
);

我不想使用Select因为我想用自定义按钮触发下拉列表，并使用 DropdownMenu 的分层优势

Answer 1

我遇到了同样的问题，经过大量研究，我发现问题是由 styled-components 包引起的，但如果版本 <=3.5.0-0，它可以工作。 所以我的解决方案是将 styled-components 包降级到 3.5.0-0。 这并不能解释为什么它不起作用，因为它们只是样式。 但目前这是一种解决方法。

在我提出问题后，Atlassian 向我发送了以下回复，我认为这些回复可以回答您的问题。

Atlaskit 不正式支持 styled-components v4 及更高版本。 我们目前要求我们的消费者根据我们的对等依赖使用 SC v3.2.6。 但是，最近有一些正在进行的工作将 Atlaskit 升级/迁移到更现代的 css-in-js 库，目前我们正在内部完成决策过程。 请随时关注此票以获取状态更新： https : //ecosystem.atlassian.net/browse/DS-6836