我試圖瓦解上的onclick方法的導航欄，但它不工作

現有的狀態轉換過程中無法更新（如render或其他部件的構造函數中）。渲染方法應該是道具和狀態的純粹功能;構造函數的副作用是反模式，但可以移動到`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> 
     ); 
    } 
}

來源

2016-07-05 patrick

在這一行：

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

不是傳遞函數體this.onNavbarToggle你傳遞運行的功能，這是不是你想要的結果的。該函數正在每個渲染上進行評估。你必須在一個引用傳遞給函數，而不是函數的結果，就像這樣：

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

來源

2016-07-05 22:34:07 jaybee

我計算過，月初我傳遞的功能，但我需要傳遞給變量我有一個參考狀態已經公開，我想設置狀態，所以它不允許我這樣做，而不是狀態，如果我採取任何其他名稱，並設置該變量其工作謝謝 – patrick

這裏：

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

要調用onNavbarToggle()（其中更新狀態）立即，內render。如果你以與NavItem和SearchBaronClick道具相同的方式引用它（sans invocation），它應該可以工作。 React建議您使用componentWillMount以防做想要立即調用該方法。

來源

2016-07-05 18:51:59 mdarens

我試圖瓦解上的onclick方法的導航欄，但它不工作

回答

相關問題