4

react-bootstrap と react-mini-router を使用して簡単なページを作成しました。

ドロップダウンのナビゲーションに、react-bootstrap の例で同じコードを使用しています。

render: function() {
        var userName = 'Superman';
        return (
            <Navbar brand="React-Bootstrap">
                <Nav>
                    <NavItem eventKey={1} href="/">Home</NavItem>
                    <NavItem eventKey={2} href="/About">About</NavItem>
                    <NavDropdown eventKey={3} title={userName} id="basic-nav-dropdown" onClick={this.userNameClick}>
                        <MenuItem eventKey="1">Action</MenuItem>
                        <MenuItem eventKey="2">Another action</MenuItem>
                        <MenuItem eventKey="3">Something else here</MenuItem>
                        <MenuItem divider />
                        <MenuItem eventKey="4">Separated link</MenuItem>
                    </NavDropdown>
                </Nav>
            </Navbar>
            )
    }

});

ページを作成してここに表示されているようにインデックスを開くと、メニューのドロップダウンが期待どおりに機能し、「ホーム」または「約」のどちらにいるかに関係なく、ページをナビゲートせずにメニューをドロップするだけです。

ただし、gulp-connect または python SimpleHTTPServer を使用してローカルホストでページを提供する場合、ドロップダウンを押すと、ドロップダウンがリンクでなくても、常にページが「ホーム」に変更/ナビゲートされます。

これはどのように起こりますか？

例の完全なコードはここで見つけることができ、Web サーバーを起動する gulp を実行することで問題を再現できます。

4

1 に答える 1

0

更新: 問題は、react-bootstrap と react-mini-router の間の競合でした。このGithub issue で進行状況/解決策を確認できます。

私の一時的な修正は、RouterMixin の handleClick 関数でイベントをキャプチャすることでした。

handleClick: function(evt) {
    var dropdownevt = (evt.path[0].id === 'acc-dropdown');
        if (url && self.matchRoute(url.pathname) && !dropdownevt) {    ...
于 2015-09-21T10:22:23.610 に答える