두 번 클릭하여 반응에서 방법을 수행해야합니다

Question

안녕하세요, 저는 현재 Meteor and React에서 프로젝트를 진행하고 있습니다. 현재 현재 Materialize로 프런트 엔드 스타일을 지정 중입니다. 드롭 다운과 사이드 - 네비게이션이 작동하려면 몇 가지 메소드에서 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); 
} 

그리고 나는이 렌더링의 방법을 사용하고 있습니다 곳이다 : 그 jQuery를하기 때문에 두 번 클릭하여 당신이

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

을 플러그인을 초기화해야합니다. 귀하의 첫 번째 클릭은 그들을 초기화, 그리고 그들은 단지 다른 모든 클릭과 함께 정상적으로 작동합니다.

이 문제를 방지하려면 componentDidMount 안에 이러한 플러그인을 초기화해야하지만 사용할 DOM 요소가 화면에 있어야합니다.

코드에서 볼 수 있듯이 로그인 한 사용자에게 사용자 역할이있는 경우에만 탐색이 렌더링됩니다. 따라서 사용자가 해당 역할을 가지고 있지 않으면 nav 요소가 렌더링되지 않으므로 플러그인을 초기화 할 수 없습니다.