下拉菜单没有得到正确的样式

Question

我的React渲染功能中有以下代码：

<div ref="btnGroup" className="dropdown">
   <button class="dropdown-toggle" data-toggle="toggle" onClick={this.toggleDropdown}></button>
   <ul class="scrollable-menu-parent dropdown-menu">
      <div>
         <form class="droplist-panel">
            <input class="droplist-search" />
            <div class="scrollable-menu">
               <li class="dropdown-item"> </li>
               ...
               ...
            </div>
         </form>
      </div>
   </ul>
</div>

在切换下拉功能中，我将open类添加到最顶层的div中。

但是，<ul>在打开时没有获得自动下拉样式，宽度更大，定位也不正确。

我是否因为下拉菜单，下拉菜单切换和下拉菜单错误导致<ul>无法获得正确的课程？

编辑：

    toggleDropdown() {
        const $el = $(this.refs.btnGroup);
        if ($el.is('.open')) {
            this.closeDropdown($el);
        }
        else {
            this.openDropdown($el);
        }
    },

    closeDropdown(ele) {
        ele.removeClass('open');
        this.clearState();
    },

    openDropdown(ele) {
        ele.addClass('open');
        if (this.props.onOpen) {
            this.props.onOpen.bind(this)();
        }
    },