Нужно нажать два раза, чтобы сделать метод в реакторе

Question

Эй, я сейчас работаю над проектом в Meteor и React, и сейчас я стилю переднего плана Materialize. Для выпадающего меню и работы side-nav мне нужно добавить некоторые строки jquery в некоторые методы. Проблема в том, что мне нужно дважды щелкнуть по кнопкам, чтобы выпадающие и боковые панели активировали или показывали себя, но после того, как я нажал два раза в первый раз, он работает всего одним щелчком мыши. Это методы:

showDropdown(){ 
    $(".dropdown-button").dropdown(); 
} 

collapse(){ 
    $('.button-collapse').sideNav({ menuWidth: 300, closeOnClick: true }); 
} 

конструктор:

export default class Navigation extends TrackerReact(React.Component) { 
constructor() { 
    super(); 
    this.showDropdown= this.showDropdown.bind(this); 
    this.collapse = this.collapse.bind(this); 
} 

И это, где я использую эти методы в оказании:

render(){ 
    var navOptions; 
    if (Roles.userIsInRole(Meteor.user(), 'user')){ 
     navOptions = (
      <div> 
     <nav> 
      <div className="nav-wrapper"> 
       <a href="/" className="brand-logo">SeniorSmart</a> 
       <a href="" onClick={this.collapse} data-activates="mobile-demo" className="button-collapse"><i className="material-icons">menu</i></a> 
       <ul id="nav-mobile" className="right hide-on-med-and-down"> 
        <li><a href="/">Hjem</a></li> 
        <li><a className='dropdown-button' href='' onClick={this.showDropdown} data-activates='dropdown1'>Drop Me!</a></li> 
        <li><a href="collapsible.html">JavaScript</a></li> 
       </ul> 
      </div> 
     </nav> 
       <ul id="dropdown1" className="dropdown-content"> 
        <li><a href="/finn_aktiviteter">Finn aktiviteter</a></li> 
        <li><a href="#">Mine venners aktiviteter</a></li> 
        <li><a href="#">Mine påmeldinger</a></li> 
        <li><a href="/opprett_aktivitet">Opprett aktivitet</a></li> 
       </ul> 
       <ul className="side-nav" id="mobile-demo"> 
        <li><a href="sass.html">Sass</a></li> 
        <li><a href="badges.html">Components</a></li> 
        <li><a href="collapsible.html">Javascript</a></li> 
        <li><a href="mobile.html">Mobile</a></li> 
       </ul> 
      </div> 
    ) 

Answer 1

Вы должны нажать дважды, потому что те JQuery плагины должны быть инициализированы. Ваш первый щелчок инициализирует их, тогда они просто работают нормально со всеми другими щелчками.

Чтобы избежать этого, вы должны инициализировать эти плагины внутри componentDidMount, но вы должны убедиться, что элементы DOM, которые будут использоваться, будут помещены на экран.

Как я вижу в вашем коде, навигатор отображается только в том случае, если вошедший в систему пользователь имеет роль пользователя. Поэтому, если пользователь не имеет этой роли, элемент nav не будет отображаться так, чтобы плагины не могли быть инициализированы.