2015-10-16 143 views
0

我在React組件中有一個單擊事件處理程序,並希望在hideLeft發生時刪除事件處理程序,但無法使用$(document).unbind('click', this.hideLeft.bind(this))。目前只能通過執行$(document).unbind('click')來移除點擊事件處理程序。未刪除React事件處理程序

我該如何避免這種情況,只能刪除與hideLeft函數關聯的點擊事件處理函數?

class Header extends Component { 
    constructor(props, context) { 
     super(props, context); 
     this.state = { 
      panel_visible: false 
     }; 
    } 

    logOut() { 
     console.log('logged out'); 
    } 

    hideLeft(event) { 
     if (!$(event.target).closest('.menu').length) { 
      $(document).unbind('click');      
      this.setState({ 
       panel_visible: false 
      }); 
     } 
    } 

    showLeft() { 
     this.setState({ 
      panel_visible: true 
     }); 
     $(document).bind('click', this.hideLeft.bind(this));  
    } 


    render() { 
     return (
       <Sticky> 
        <header className='app-header'> 
         <LeftPanel visibility={this.state.panel_visible} showLeft={e => this.showLeft()} 
         hideLeft={e => this.hideLeft()} /> 
         <button onClick={e => this.showLeft()}>Show Left Menu!</button> 
         <button className='btn btn-default logout' onClick={e => this.logOut()}>Log Out</button> 
         <h1>Some header </h1> 
        </header> 
       </Sticky> 
      ); 
    } 
} 
+0

我不知道是什麼反應代碼是在這裏?渲染方法似乎是空白的,事件處理程序通常可以通過反應代碼來處理,而不是使用jquery。 – noveyak

+0

嗨@noveyak,我省略了渲染方法的簡單性,因爲事件處理程序與渲染方法無關 –

回答

1

我使用香草JS方法addEventListenerremoveEventListener這樣做。

加入

document.addEventListener('click', this.hideLeft.bind(this)); 

刪除:

document.removeEventListener('click', this.hideLeft.bind(this));