语义 UI 下拉菜单需要点击 2 次才能触发

Question

我在此 project 中使用语义 UI 下拉菜单以及 ReactJS。第一次单击下拉菜单（位于页面右上角）时没有任何反应；第二次单击时，下拉菜单按预期显示。我认为这可能与 tabindex 属性有关。当我在第一次单击时检查元素时，它将其设置为 0，在第二次单击时将其设置为 -1。但是，手动设置这些无效。或者，这可能是 jQuery 与语义 UI 冲突？

这里是 React 组件的代码：

var Menu = React.createClass({

showDropdown: function(){
  $('.dropdown')
    .dropdown({
      transition: 'drop'
    });
},

render: function(){
    return(
        <div>
            <div className="ui red inverted menu">
              <div className="header item">Mealette</div>
              <div className="right menu">

                <div onClick={this.showDropdown} className="ui dropdown">
                  <div className="item header">
                    <i className="sidebar icon"></i>
                  </div>

                  <div className="ui menu menu-dropdown">
                    <div className="item">
                      <MoreRestaurantsFilter />
                    </div>
                    <div className="item">
                      <ChangeLocationLink>Change Location</ChangeLocationLink>
                    </div>
                    <div className="">
                      <CategoryFilter />
                    </div>
                  </div>
                </div>

              </div>
            </div>
    </div>
    )
}

});

如有任何想法，我们将不胜感激！

Answer 1

这是我认为正在发生的事情：

您单击菜单，它会调用 showDropdown。
在showDropdown中设置jQuery下拉菜单处理，然后控制returns到主应用程序而不触发下拉菜单本身。
您再次单击，jQuery 这次实际上处理了事件（并且可能重新附加自身，导致重复的事件侦听器和内存泄漏）。

有几种方法可以解决这个问题。天真的解决方案可能是调用语义 UI 下拉控件的 show 方法（或任何它被调用的方法），例如

showDropdown: function() {
  $('.dropdown').dropdown({
    transition: 'drop'
  });

  // not sure if this is right, but it's roughly how Bootstrap works
  $('.dropdown').dropdown('show')
}

一个小步骤可能是使用 React refs 而不是上述方法的 class 名称。您还可以在重新附加下拉列表之前检查是否已经附加它以避免内存泄漏。

最惯用的 React 解决方案可能是在 componentDidMount 中设置 jQuery 行为，然后在 componentWillUnmount 中删除它（如果适用于语义 UI） , 例如

componentDidMount() {
  $('.dropdown').dropdown({
    transition: 'drop'
  })
}

这样，jQuery 会在组件的整个生命周期内管理下拉菜单的生命周期，您甚至不再需要 showDropdown 方法。

这有意义吗？

语义 UI 下拉菜单需要点击 2 次才能触发

Semantic UI Dropdown Needs 2 Clicks to Fire

javascript

jquery

drop-down-menu

reactjs

semantic-ui