Question

我是reactjs的新手，并为测试创建了组件。这是我的代码。

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

正如你在这里看到的，我在组件中创建了两个函数。

我触发了两个handleClick事件。

一个位于返回函数{::this.A}内，另一个位于返回{::this.B}

之外

不幸的是，功能被完美触发但B未被触发。

显示错误"TypeError: Cannot read property 'B' of undefined"

我该如何解决这个问题？

Answer 1

我相信submenu_items.push正在破坏{this}。这变成submenu_items而不是react组件。

您可以在该语句之前使用别名，如：

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

React.js＆＃34;这个＆＃34;在渲染函数中未定义

1 个答案: