javascript - 我正在尝试折叠 onclick 方法上的导航栏，但它不起作用

Question

这是来自控制台的错误:

无法在现有状态转换期间进行更新(例如在 render 或其他组件的构造函数内)。渲染方法应该是 props 和 state 的纯函数；构造函数副作用是一种反模式，但可以移至“componentWilmount”。

代码:

    import {Component, PropTypes} from 'react';

    import './Header.less';

    import { Button,Navbar, Nav, NavItem, CollapsibleNav,  NavDropdown, NavBrand, MenuItem} from 'react-bootstrap';

    import SearchBar from 'components/search/SearchBar';

    import {LinkContainer} from 'react-router-bootstrap';

export default class Header extends Component {

    static propTypes = {

        flux: PropTypes.object.isRequired,

        searchTerm: PropTypes.string

    };

    state = {
            navExpanded: false
    }

    onNavItemClick = () => {
        this.setState({ navExpanded: false });
    }

    onNavbarToggle = () => {
        this.setState({navExpanded: !this.state.navExpanded});
    }

    render() {
        return (
            <Navbar fixedTop inverse  toggleNavKey={0} onClick={this.onNavbarToggle()}>
                <Navbar.Header>
                    <Navbar.Brand>
                        <LinkContainer to={"/"}>
                            <a className="navbar-brand"><img alt="######" src={Logo} /></a>
                        </LinkContainer>
                    </Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav navbar>
                        <LinkContainer to={"/#####"}>
                            <NavItem onClick={ this.onNavItemClick } eventKey={1}>xxxxxxxxxxxxxx</NavItem>
                        </LinkContainer>
                        <LinkContainer to={"/#####"}>
                            <NavItem onClick={ this.onNavItemClick } eventKey={2}>xxxxxxxxxxxx</NavItem>
                        </LinkContainer>
                        <LinkContainer to={"/#######"}>
                            <NavItem onClick={ this.onNavItemClick } eventKey={3}>xxxxxxxxx</NavItem>
                        </LinkContainer>
                        <LinkContainer to={"/######"}>
                            <NavItem onClick={ this.onNavItemClick } eventKey={4}>xxxxxxxxx</NavItem>
                        </LinkContainer>
                        <LinkContainer to={"/######"}>
                            <NavItem onClick={ this.onNavItemClick } eventKey={5}>xxxxxxxxx</NavItem>
                        </LinkContainer>
                    </Nav>
                    <Nav pullRight>
                        <SearchBar onClick={ this.onNavItemClick } searchTerm={this.props.searchTerm} />
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        );
    }
}

Answer 1

在这一行中:

<Navbar fixedTop inverse toggleNavKey={0} onClick={this.onNavbarToggle()}>

您不是传入函数体 this.onNavbarToggle，而是传入运行该函数的结果，这不是您想要的。该函数在每次渲染时都会被评估。您需要传递对函数的引用，而不是函数的结果，如下所示:

<Navbar fixedTop inverse toggleNavKey={0} onClick={this.onNavbarToggle}>