ReactJs Mixin沒有更新/共享狀態

我對React JS的整個世界都很陌生。我有兩個通過mixin共享功能的組件。它處理一個菜單，打開和關閉..它工作正常，當我點擊按鈕，狀態轉爲真假。在第二個組件中，我想使用關閉功能在點擊陰影元素時關閉菜單。調用close函數後狀態更新。但是，當點擊按鈕打開菜單狀態仍然是錯誤的。ReactJs Mixin沒有更新/共享狀態

任何想法？

---密新---

var menuMixin = { 

navIcon: $('#nav-icon'), 
menu: $('#menu'), 
htmlElement: $('html'), 
header: $('header'), 
getInitialState: function() { 

    return { 

     state: false 

    }; 

}, 
openMenu: function(){ 

    var THIS = this;  

    var $navIcon = $('#nav-icon'), 
     $menu = $('#menu'), 
     $html = $('html'), 
     $header = $('header'); 

    $menu.show(); 
    $navIcon.addClass('open'); 

    setTimeout(function(){ 

     THIS.switchLogo(true); 
     $menu.addClass('active'); 
     $html.addClass('fixed'); 
     $header.removeClass('active'); 
     THIS.setState({state: true}); 

    }, 255);  

}, 

closeMenu: function() { 

    var THIS = this; 

    var $navIcon = $('#nav-icon'), 
     $menu = $('#menu'), 
     $html = $('html'), 
     $header = $('header'); 

    $menu.removeClass('active'); 
    $navIcon.removeClass('open'); 
    this.switchLogo(false); 

    setTimeout(function(){ 

     $menu.hide(); 
     $html.removeClass('fixed'); 
     THIS.setState({state: false}); 

     if ($(document).scrollTop() > 200) { 

      $header.addClass('active'); 

     } 

    }, 255); 

} 

};

--Nav Button--

var NavButton = React.createClass({ 
mixins:[logoSwitchlMixin, menuMixin], 
handleClick: function() { 

    console.log('handleClick -->' + this.state.state); 

    if (!this.state.state) { 

     this.openMenu(); 

    } 
    else { 

     this.closeMenu(); 

    } 

}, 
render: function() { 
    return (
     <button id="nav-button"> 
      <div id="nav-icon" onClick={this.handleClick} ref="icon"> 
       <span></span> 
       <span></span> 
       <span></span> 
      </div> 
     </button> 
    ) 
} 

});

- 滑動菜單 -

var MainNav = React.createClass({ 

mixins:[logoSwitchlMixin, menuMixin], 
scroll: function(target) { 

    $('html, body').animate({ 

     scrollTop: $('#'+ target).offset().top 

    }, 600); 
}, 
scrollSection: function(e){ 

    e.preventDefault(); 
    this.scroll($(e.target).data('id')); 

}, 
render: function() { 
    return (
     <div id="menu" data-state="false"> 
      <div id="menu_wrapper"> 
       <nav> 
        <ul> 
         <li><a data-id="what" title="What We Do" alt="What We Do" onClick={this.scrollSection} >What We Do</a></li> 
         <li><a data-id="why" title="Why We Do It" alt="Why We Do It" onClick={this.scrollSection}>Why We Do It</a></li> 
         <li><a data-id="experiance" title="Our Experience" alt="Our Experience" onClick={this.scrollSection}>Our Experience</a></li> 
         <li><a data-id="how" title="How We Do It" alt="How We Do It" onClick={this.scrollSection}>How We Do It</a></li> 
         <li><a data-id="competence" title="Competence" alt="Competence" onClick={this.scrollSection}>Competence</a></li> 
         <li><a data-id="contact" title="Contact" alt="Contact" onClick={this.scrollSection}>Contact</a></li> 
        </ul> 
       </nav> 
      </div> 
      <div onClick={this.closeMenu} id="shadow_blocker"></div> 
     </div> 
    ); 
} 

}); 
ReactDOM.render(
    <MainNav />, 
    document.getElementById('main-nav') 
);

來源

2016-04-18 user3355603

混入的概念代碼重用。相同的代碼可以用於多個組件。

但是你不能設置狀態的混入像你menuMixin

的混入做到一旦連接到組件和組件內部使用將自動綁定與組件和參考組件（此）將通過反應自動綁定mixin函數。

所以你不能有狀態從mixin共享。但是你可以引用一個dom元素等，但不能說明狀態。你也可以通過setState（）方法修改組件狀態，這個方法會正確更新，但狀態應該存在於組件中，而不是在mixin中。

來源

2016-04-18 10:02:18

感謝您的解釋。我剛剛在按鈕元素上添加了狀態，並從那裏獲取狀態.. – user3355603

ReactJs Mixin沒有更新/共享狀態

回答

相關問題