onSelect on NavDropdown.Item in React.js

Question

我有一个导航栏，我想在每个下拉 navitem 单击时呈现不同的组件。我不确定如何从每个 navitem 中导出事件密钥并使用它。 Currenlty，onSelect 适用于整个导航。请耐心等待我，我只是在学习 React。

<Navbar collapseOnSelect  expand="lg" variant="light" bg="light">
    <Nav onSelect={key=>{this._handleSelect(key)}}>
        <NavDropdown eventKey={C.CONTEXT_DFMP} title="DFMP">
            <NavDropdown.Item eventKey={C.CONTEXT_DFMP}>DFMP (District )</NavDropdown.Item>
            <NavDropdown.Item eventKey={C.CONTEXT_FMU}>FMU (Forest )</NavDropdown.Item>
            <NavDropdown.Item eventKey={C.CONTEXT_SILVTREAT_PARAMS}>Silviculture </NavDropdown.Item>
        </NavDropdown>
        <NavDropdown eventKey={C.CONTEXT_SFMP} title="SFMP">
            <NavDropdown.Item eventKey={C.CONTEXT_SFMP}>SFMP</NavDropdown.Item>
        </NavDropdown>                  
    </Nav>

Answer 1

尝试向 NavDropdown.Item 组件添加一个 onSelect 属性

<NavDropdown.Item onSelect={() => this._handleSelect(C.CONTEXT_DFMP)}>DFMP (District)</NavDropdown.Item>

Answer 2

我不确定我是否理解对了，但是如果你想在下拉菜单点击时呈现一个新页面（或者更好的词是导航），你最好使用 react-router，在 Navbar 组件中，你可以使用来自 react-router-dom.

的 NavLink

示例：

<Router>
 <Route exact path={"/District"} component={District} />
 <Route exact path={"/Forest"} component={Forest} />
</Router>

import { NavLink } from "react-router-dom";

 <NavDropdown title="DFMP" id="basic-nav-dropdown">
   <NavLink className="nav-link" to="/District">
    DFMP (District )
   </NavLink>
   <NavLink className="nav-link" to="/Forest">
     FMU (Forest )
   </NavLink>
</NavDropdown>

有关 react-router 的更多信息，请点击此处。

如果您只想从每个导航项派生事件键，则应为每个 Nav.item

使用 onSelect

<NavDropdown.Item
  eventKey="info"
  onSelect={(event, eventKey) => console.log(event, eventKey)}
>
  DFMP (District)
</NavDropdown.Item>

这里是类似的问题。

onSelect on NavDropdown.Item in React.js

onSelect on NavDropdown.Item in React.js

javascript

jsx

nav

reactjs