Question

我在此project中使用了语义UI下拉列表以及ReactJS。第一次单击下拉菜单（页面右上角）时没有任何反应;在第二次单击时，下拉菜单按预期显示。我认为这可能与tabindex属性有关。当我在第一次单击时检查元素时，它将其设置为0，并在第二次单击时将其设置为-1。但是，手动设置它们无效。或者，它可能是jQuery vs Semantic 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下拉处理，然后控制返回主应用程序而不触发下拉列表。
你再次点击，这次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而不是使用上述方法的类名。您还可以检查下拉列表是否已经附加，然后重新附加它以避免内存泄漏。

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

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

这样，jQuery可以管理组件整个生命周期的下拉列表的生命周期，甚至不再需要showDropdown方法。

这有意义吗？

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

1 个答案: