语义 ui 反应下拉组件始终保持打开状态答案

【问题标题】：Semantic ui react dropdown component always stay open语义 ui 反应下拉组件始终保持打开状态
【发布时间】：2018-10-12 14:31:48
【问题描述】：

我正在尝试在菜单组件（Meteor 应用程序）中使用语义 ui react 下拉组件。该组件始终保持打开状态，最重要的是，它完全呈现在菜单组件内。

here a simple image:

这里是代码：

  render() {
const {
  documents, columns, loading, className,
} = this.props;
const options = [
  {
    key: 'default',
    value: 'default',
    text: 'Default grid',
  },
  {
    key: 'edit',
    value: 'edit',
    text: 'Edit grid',
  },
];
return (
  !loading ? (
    <div className="eb-list" >
      <div className="eb-list-toolbar" >
        <Menu borderless icon="labeled" >
          <Menu.Item name="add" onClick={this.addDocument}><Icon name="add" />Nuovo</Menu.Item>
          <Menu.Item name="edit" onClick={this.editDocument}><Icon name="edit" />Modifica</Menu.Item>
          <Menu.Item name="copy"><Icon name="copy" />Duplica</Menu.Item>
          <Menu.Item name="mass"><Icon name="tasks" />Modifica di massa</Menu.Item>
          <Menu.Item name="delete" onClick={this.removeDocuments}><Icon name="delete" />Elimina</Menu.Item>
          <Menu.Item position="right" header name="className" >{className}</Menu.Item>
          <Dropdown item icon="" open={false} trigger={<Icon name="grid layout" />} options={options} />
        </Menu>
      </div>
      <div className="eb-list-content" >
        <AutoSizer defaultHeight={200} defaultWidth={500} >
          {({ height, width }) => (
            <Table
              data={documents}
              columns={columns}
              ref={(t) => { this.handleTable = t; }}
              onDoubleClickHandler={this.handleDoubleClick}
              height={height}
              width={width}
            />
        )}
        </AutoSizer>
      </div>
    </div>) : <Loading />

CSS：

.eb-list {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
}

.eb-list > .eb-list-content {
    flex: 1 1 auto;
}

.eb-list > .eb-list-toolbar {
    padding-bottom: 5px;
}

我不知道我做错了什么。我观察到子组件 API 的行为相同。

谁能帮帮我？

【问题讨论】：

标签： reactjs meteor semantic-ui

【解决方案1】：

解决了！

我忘记在 custom.semantic.json 中包含下拉列表的定义

{
    "definitions" : {
      "site": true,
      "menu": true,
      "icon": true,
      "dropdown": true,
      "modal": true,
      "list": true
    },
    "themes": {
      "amazon"     : false,
      "basic"      : true,
      "bookish"    : false,
      "bootstrap3" : false,
      "chubby"     : false,
      "classic"    : false,
      "default"    : true
    }
}

现在它可以正常工作了！

【讨论】：