响应引导NavDropdown链接重写NavDropdown.Item链接

Question

我们有一个关于我们的React应用程序，我们正在尝试在一个<NavDropdown.Item />中嵌套几个<NavDropdown />。

​

​

在上面的屏幕截图中，单击Tools路由到/tools，然后单击下拉选项应该链接到/tools/shot-charts、/tools/team-stats-graphs等。您可以在下面的代码中看到这一点：

import { Nav, Navbar, NavDropdown } from 'react-bootstrap';

<Navbar.Collapse id='basic-navbar-nav'>
    <div className='navbar-nav-wrapper'>
        <Nav>
            <NavDropdown
                title='Tools'
                as={Link}
                to='/tools'
                className={`${isTools ? 'selected' : ''}`}
                onMouseEnter={() => setIsToolsHovered(true)}
                onMouseLeave={() => setIsToolsHovered(false)}
                onClick={() => history.push('/tools')}
                show={isToolsHovered}
            >
                <NavDropdown.Item as={Link} to={'/tools/shot-charts'}>Shot Charts</NavDropdown.Item>
                <NavDropdown.Item as={Link} to={'/tools/team-scatter'}>Team Stats Graphs</NavDropdown.Item>
                <NavDropdown.Item as={Link} to={'/tools/player-scatter'}>Player Stats Graphs</NavDropdown.Item>
                <NavDropdown.Item as={Link} to={'/tools/model-fitting'}>Linear Regressions</NavDropdown.Item>
            </NavDropdown>
        </Nav>
    </div>
</Navbar.Collapse>

当前，当单击Shot Charts时，页面呈现两次，首先使用/tools/shot-charts url，然后紧接着呈现到/tools url。这是个问题。看来，onClick={() => history.push('/tools')} on <NavDropdown />正在触发，尽管单击了快照图表，而不是Tools。

如果我们删除onClick={() => history.push('/tools')}，那么4个下拉按钮可以工作，但是单击Tools不会改变页面。看起来as={Link}和to='/tools'在<NavDropdown />上并没有做任何事情来使Tools可点击。

Answer 1

我不认为应该有一个链接to 和 an onClick来有效地在外部NavDropdown上做同样的事情，但是问题是来自嵌套NavDropdown.Item Link的onClick事件正在传播到NavDropdown。

我建议删除NavDropdown上的NavDropdown处理程序，并将一个onClick处理程序添加到嵌套的NavDropdown.Item组件中，以停止单击事件的传播。

const stopClickPropagation = event => event.stopPropagation();

...

<NavDropdown
  title='Tools'
  as={Link}
  to='/tools'
  className={`${isTools ? 'selected' : ''}`}
  onMouseEnter={() => setIsToolsHovered(true)}
  onMouseLeave={() => setIsToolsHovered(false)}
  show={isToolsHovered}
>
  <NavDropdown.Item
    as={Link}
    to={'/tools/shot-charts'}
    onClick={stopClickPropagation}
  >
    Shot Charts
  </NavDropdown.Item>
  <NavDropdown.Item
    as={Link}
    to={'/tools/team-scatter'}
    onClick={stopClickPropagation}
  >
    Team Stats Graphs
  </NavDropdown.Item>
  <NavDropdown.Item
    as={Link}
    to={'/tools/player-scatter'}
    onClick={stopClickPropagation}
  >
    Player Stats Graphs
  </NavDropdown.Item>
  <NavDropdown.Item
    as={Link}
    to={'/tools/model-fitting'}
    onClick={stopClickPropagation}
  >
    Linear Regressions
  </NavDropdown.Item>
</NavDropdown>