React.js“ this”在渲染函数中未定义

Question

I'm new to reactjs and created component for testing. Here is my code.

class TestComponent extends React.Component {

    A(){
        //content here
    }

    B() {
        //content here
    }

    render() {
        let ts = true;
        if(ts==true){
            submenu_items.push(<NavItem glyph='icon-fontello-search' eventKey={3} onClick={::this.B} name={B}/>);
        } else {
            submenu_items.push(<NavItem glyph='icon-fontello-gauge' eventKey={4} name={application} />);
        }

        return (
            <div>
                <div className='sidebar-nav-container'>
                    <Nav style={{marginBottom: 0}} ref={(c) => this._nav = c}>
                        {submenu_items}
                        <NavItem glyph='icon-ikons-logout' href='#' onClick={::this.A} name='A' />
                    </Nav>
                </div>
           </div>
        );
    }
}

As you can see here I created two functions in component.

I triggered two handleClick events.

One is inside the return function {::this.A} and the other is in the outside of return {::this.B}

Unfortunately A function is triggered perfectly but B is not triggered.

It shows error "TypeError: Cannot read property 'B' of undefined"

How can I fix this?

Answer 1

I believe submenu_items.push is clobbering {this}. this becomes submenu_items instead of the react component.

You can alias this before that statement like:

if(ts==true)
{ var thisB = ::this.B; 
  submenu_items.push(<NavItem glyph='icon-fontello-search' eventKey={3} onClick={thisB} name={B}/>); }