Reactjs this.setState ist kein Funktionsfehler

Question

Im Neuling, um js zu reagieren, ich weiß nicht, was falsch ist mit unter Code, aber ich bekomme SetState ist kein Funktionsfehler.Bitte helfen Sie mir, dies zu beheben.

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

Sie benötigen

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

Weitere Einzelheiten dazu auf den Ereignisse verarbeiten Seite des React doc this.showProfile in der Komponente Konstruktor zu binden: https://facebook.github.io/react/docs/handling-events.html

Answer 2

Erweiterung auf Delapouite ' s Antwort, wenn Sie nicht möchten, dass jede Funktion im Konstruktor gebunden wird, können Sie Pfeilfunktionen verwenden, um automatisch zu binden in den richtigen Kontext.

Zum Beispiel:

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;