24

アイテムが選択された後にメニューを折りたたむにはどうすればよいですか?

フィドルで動作させる方法がわかりませんが、これは私がすることですか? https://jsfiddle.net/vjeux/kb3gN/

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

export default class App extends React.Component {

    constructor(props) {
      super(props);
      this.onSelect = this.onSelect.bind(this);
      this.toggleNav = this.toggleNav.bind(this);
      // this.state = {navExpanded: false};
    }

    onSelect(e){
        console.log('OnSelect')
        // console.log(this.state.navExpanded);
        // this.setState({navExpanded: false});
    }

    toggleNav(){console.log('toggle...')};

    // <Navbar inverse fixedTop toggleNavKey={0} navExpanded={this.state.navExpanded} onToggle={() => this.toggleNav()}>
    // <Navbar inverse fixedTop toggleNavKey={0} navExpanded={this.state.navExpanded} >

    render() {
        return (

          <Navbar inverse fixedTop toggleNavKey={0} >
            <Nav right eventKey={0} onSelect={this.onSelect} > {/* This is the eventKey referenced */}
              <NavItem eventKey={1} href="#">Link</NavItem>
              <NavItem eventKey={2} href="#">Link</NavItem>
            </Nav>
          </Navbar>     

      )

    }

    componentDidMount() {

    }
}

React.render(<App />, document.getElementById('example'));
4

12 に答える 12

67

2020 年にここに来てHooksを使用している人はreact-router、を使用しNav.Linkている可能性があります。Linkreact-router

そして、あなたは何を見つけましたか？その結果、モバイル メニューが期待どおりに機能せず、リンクをクリックしても閉じず、何も機能していないようです。

その問題に対する私の「簡単な」解決策（フックを使用）は次のとおりです。

まず、フックをセットアップします。

const [expanded, setExpanded] = useState(false);

2 番目 に、Navbarこのプロップを追加します。

<Navbar expanded={expanded}>

これで、メニューの可視性を制御できるようになりました。「最初の」ロードでは非表示になります。

3 番目onClickに、メニューの表示ステータスを変更するトグル ハンドラーにイベントを追加します。

<Navbar.Toggle onClick={() => setExpanded(expanded ? false : "expanded")} />

4 番目に、Navbar 内の react-router からonClick={() => setExpanded(false)}すべてのコンポーネントに prop を追加します。Link

利益！インターネットを 1 時間以上さまよった後、私が見つけた最も簡単でクリーンな解決策であることを誓います。

于 2019-10-23T20:19:24.247 に答える
3

ここには多くの答えがありますが、今日の修正は非常に簡単です。状態またはクリック イベントを使用する必要はありません。Linkこれは、 eachとしてレンダリングしていると仮定していますNav.Link。

collapseOnSelectここにプロップを追加します。

<Navbar collapseOnSelect expand="false">

ANDeventKeyをそれぞれに追加しますNav.Link。

<Nav.Link as={Link} to="/page1" eventKey="1">Page 1</Nav.Link>
<Nav.Link as={Link} to="/page2" eventKey="2">Page 2</Nav.Link>
于 2021-11-11T09:48:26.460 に答える