React 中的下拉菜单未显示答案

【问题标题】：Dropdown menu in React not showingReact 中的下拉菜单未显示
【发布时间】：2019-07-17 23:03:55
【问题描述】：

我正在尝试在卡片元素中创建一个简单的下拉菜单，但在让菜单实际显示时遇到问题。我在 Chrome 上检查了它，它说菜单在那里，但我无法让它显示在屏幕上。

constructor(props) {
    super(props);
    this.state = {
        loading: true,
        open: false
    };
}

    toggleDropDown = () => {
    this.setState({ open: !this.state.open });
};

<div className="content">
     <div
         onClick={event => {
             event.stopPropagation();
         }}
         onFocus={() => {
             this.toggleDropDown();
         }}
         onBlur={() => {
             this.toggleDropDown();
         }}
         tabIndex="0"
         className="ui right floated dropdown" >
         <i className="ellipsis vertical icon" />
              {this.state.open ? (
                    <div className="menu">
                         <div className="item">
                              <i className="edit icon" /> Edit Post
                         </div>
                         <div className="item">
                              <i className="delete icon" />Remove Post
                         </div>
                         <div className="item">
                              <i className="hide icon" /> Hide Post
                         </div>
                    </div>
              ) : null}
        </div>
        <div className="header">{schedule.title}</div>
        <div className="description">
              <p>{schedule.description}</p>
        </div>
        <div className="meta">
             <span className="right floated time">
                   {moment(schedule.date).fromNow()}
             </span>
       </div>
 </div>

这是我正在制作的卡片的屏幕截图（带有类名内容的 div 就是图片中显示的全部内容）。 Reactjs dropdown menu

【问题讨论】：

你的render()方法在哪里？
我剪掉了很多代码，因为它很长。它正确呈现。这是 git 链接，如果您想查看 github.com/littlejkim/Sked/blob/master/client/src/components/…
总比没有好，但我宁愿看到一些我可以实际测试的东西。你能在CodeSandbox 上扔点东西吗？
在onBlur 回调中注释掉this.toggleDropDown(); 会发生什么？
是一样的。我将尝试使用沙箱，但我不认为这是反应部分的问题，因为 html 元素可以正常工作（当我按下它时会出现类名菜单的 div，当我失去焦点时会消失）。只是元素本身并没有真正出现在屏幕上，这很奇怪。

标签： javascript reactjs dropdown semantic-ui

【解决方案1】：

问题是.menu，虽然它出现在检查器中，但设置为display: none。

我正在禁用该属性。

这是按预期显示的菜单：

这是一个粗略的修复，表明这是一个 display 问题：CodeSandbox Demo。

【讨论】：

最后一个问题。我正在通过一个数组进行映射以在屏幕上创建几个卡片元素。现在，我对每张卡片都有一个三元运算符来显示或不显示菜单；但我当前的实现（显示所有卡的所有菜单或不显示）不是最佳的。你对如何有效地做到这一点有什么建议吗？我是否必须通过切换功能传递卡的 ID？
@YoungDoKim 去睡觉了，但明天再看看。
@YoungDoKim 每张卡片都应该是它自己的组件，并且在state 中有一个open 条目。然后，如果每个.menu 的className 中存在active 类，则显示/隐藏卡片。

【解决方案2】：

我们需要像这样强行覆盖一个 css 类：

.ui.dropdown .visible.menu {
  display: inline-block !important;
}

【讨论】：