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就是图片中显示的所有内容）。 qazxsw poi

Answer 1

问题是Reactjs dropdown menu虽然出现在检查员身上，却被设置为.menu。

这是我禁用该物业。

display: none

这里是按预期显示的菜单：

这是一个粗略的修复，显示它是一个问题：display。