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

Posted 2023-02-22

【中文标题】我正在尝试折叠 onclick 方法上的导航栏，但它不起作用

【英文标题】：i am trying to collapse the nav bar on onclick method but it is not working

【发布时间】：2016-11-07 13:51:22

【问题描述】：

这是来自控制台的错误：

在现有状态转换期间无法更新（例如在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  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>
        );
    

【参考方案1】：

在这一行：

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

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

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

【讨论】：

我很早就发现我正在传递一个函数，但我需要传递对变量的引用我有一个已经公开的状态，我正在尝试设置状态，所以它不允许我这样做如果我使用任何其他名称并将该变量设置为它的工作，而不是状态谢谢

【参考方案2】：

这里：

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

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