ReactJS組件的onClick方法中'this'的值爲空

該錯誤發生在onClick方法<span className="nav-toggle">上。錯誤是：無法讀取屬性setState null。我認爲這是一個問題，因爲this的範圍或因爲setState是異步方法。這就是爲什麼我試圖在文檔中使用推薦的方法（使用帶有函數的setState而不是傳入新的狀態對象）。ReactJS組件的onClick方法中'this'的值爲空

export default class NavigationBar extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 
    isMobile: this.props.isMobile 
    }; 
} 

render() { 
console.log('Rendering component'); 
return (
    <header className="nav has-shadow"> 
    <div className="nav-left"> 
    <Link className="title" to="/">Food Diary</Link> 
    </div> 

    <span className={ (this.state.isMobile) ? 'nav-toggle is-active' : 'nav-toggle'} onClick={this.toggleMobileNav}> 
    <span></span> 
    <span></span> 
    <span></span> 
    </span> 

    <div className={ (this.state.isMobile) ? 'nav-right nav-menu is-active' : 'nav-right nav-menu'}> 
    <Link className={(this.props.currentActivePage === 'Home')? "nav-item is-active" : "nav-item"} to="/"> 
    {(this.props.loggedIn) ? 'Home' : 'Login | Register'} 
    </Link> 
    <Link className={(this.props.currentActivePage === 'Dashboard')? "nav-item is-active" : "nav-item"} to="/dashboard"> 
    Dashboard 
    </Link> 
    <Link className={(this.props.currentActivePage === 'Account')? "nav-item is-active" : "nav-item"} to="/account"> 
    My Account 
    </Link> 
    <span className="nav-item"> 
    <a className="button is-dark" href="https://github.com/"> 
     <span className="icon"> 
     <i className="fa fa-github"></i> 
     </span> 
     <span>Github Repository</span> 
    </a> 
    </span> 
    </div> 
    </header> 
); 
} 

toggleMobileNav() { 
console.log('Got inside toggleMobileNav'); 
this.setState((prevState, props) => { 
    return { 
    isMobile: !prevState.isMobile 
    }; 
}); 
} 
};

來源

2017-04-26 ScaVenGerS

得綁定的事件處理程序和'this'一拉'this.handleClick = this.handleClick.bind（此）;'你可以在[這裏]閱讀（https://facebook.github.io/react/docs/handling-events.html） –

非常感謝你的幫助，它現在可行！我一直在努力尋找關於這個問題的文件和答案，現在幾個小時。 – ScaVenGerS

你必須綁定this到處理程序：

export default class NavigationBar extends Component { 
    constructor(props) { 
    super(props); 
     this.state = { 
     isMobile: this.props.isMobile 
     }; 
    this.toggleMobileNav = this.toggleMobileNav.bind(this); // BIND TO THIS 
    } 

    render() { 
    console.log('Rendering component'); 
    return (
    <header className="nav has-shadow"> 
    <div className="nav-left"> 
     <Link className="title" to="/">Food Diary</Link> 
    </div> 

    <span className={ (this.state.isMobile) ? 'nav-toggle is-active' : 'nav-toggle'} onClick={this.toggleMobileNav}> 
     <span></span> 
     <span></span> 
     <span></span> 
    </span> 

    <div className={ (this.state.isMobile) ? 'nav-right nav-menu is-active' : 'nav-right nav-menu'}> 
     <Link className={(this.props.currentActivePage === 'Home')? "nav-item is-active" : "nav-item"} to="/"> 
     {(this.props.loggedIn) ? 'Home' : 'Login | Register'} 
     </Link> 
     <Link className={(this.props.currentActivePage === 'Dashboard')? "nav-item is-active" : "nav-item"} to="/dashboard"> 
     Dashboard 
     </Link> 
     <Link className={(this.props.currentActivePage === 'Account')? "nav-item is-active" : "nav-item"} to="/account"> 
     My Account 
     </Link> 
     <span className="nav-item"> 
     <a className="button is-dark" href="https://github.com/"> 
     <span className="icon"> 
     <i className="fa fa-github"></i> 
     </span> 
     <span>Github Repository</span> 
     </a> 
     </span> 
    </div> 
    </header> 
    ); 
    } 

    toggleMobileNav() { 
    console.log('Got inside toggleMobileNav'); 
    this.setState((prevState, props) => { 
    return { 
    isMobile: !prevState.isMobile 
    }; 
    }); 
    } 
};

更多信息here

來源

2017-04-26 18:27:41

ReactJS組件的onClick方法中'this'的值爲空

回答

相關問題