Reactjs this.setState不是函數錯誤

Question

Im新手到React js，我不知道下面的代碼有什麼問題，但我得到setState不是函數錯誤。請幫我解決這個問題。

class AppBarLayout extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
     visibleSideBar:true, 
     slide:"" 
     } 
    } 
    showProfile(){ 

    this.setState({ 
     slide:'slide' 
    }); 
    console.log(this.state.slide); 
    } 
    render(){ 
    return(
      <div> 
     <header> 
      <NavBar show={this.showProfile}/> 
      <Profile slide={this.state.slide} /> 
     </header> 
     </div> 
    ); 
    } 
} 
export default AppBarLayout; 

Answer 1

您需要

this.showProfile = this.showProfile.bind(this)

更多細節結合this.showProfile在組件構造這個在處理事件頁的陣營文檔的：https://facebook.github.io/react/docs/handling-events.html

Answer 2

擴展在Delapouite「如果你不喜歡綁定構造函數中的每個函數，你可以使用箭頭函數自動綁定到正確的上下文。

例如：

class AppBarLayout extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
     visibleSideBar:true, 
     slide:"" 
     } 
    } 

    // Now showProfile is an arrow function 
    showProfile =() => { 
    this.setState({ 
     slide:'slide' 
    }); 
    console.log(this.state.slide); 
    } 

    render(){ 
    return(
     <div> 
     <header> 
      <NavBar show={this.showProfile}/> 
      <Profile slide={this.state.slide}/> 
     </header> 
     </div> 
    ); 
    } 
} 
export default AppBarLayout;