javascript - React 中的下拉菜单未显示

Question

我正在尝试在卡片元素中创建一个简单的下拉菜单，但在让菜单实际显示时遇到问题。我在 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 下拉菜单

标签： javascriptreactjsdropdownsemantic-ui

Answer 1

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

这是我禁用该属性。

这是按预期显示的菜单：

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