我试图在 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()}>

您正在 render 内立即调用 onNavbarToggle()（更新状态）。如果您以与 NavItem 和 SearchBar onClick 道具相同的方式引用它（无调用），它应该可以工作。 React 建议您使用 componentWillMount 以防您想立即调用该方法。

Answer 2

这一行：

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

您没有传入函数体 this.onNavbarToggle，而是传入了运行函数的 result，这不是您想要的。该函数正在每个渲染器上进行评估。您需要传入对函数的引用，而不是函数的结果，如下所示：

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

我试图在 onclick 方法上折叠导航栏，但它不起作用

i am trying to collapse the nav bar on onclick method but it is not working

javascript

flux

twitter-bootstrap

ecmascript-6

reactjs