未刪除React事件處理程序

我在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> 
      ); 
    } 
}

來源

2015-10-16 Yan Yi

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

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

我使用香草JS方法addEventListener和removeEventListener這樣做。

加入

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

刪除：

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

來源

2015-12-09 14:12:30

未刪除React事件處理程序

回答

相關問題