Выберите элемент из Navbar - элемент остается выделенным

Question

У меня есть простой Navbar, подобный этому:

 <Navbar.Collapse>
    <Nav>
      <NavItem eventKey={1} href={`${process.env.PUBLIC_URL}/`}>
        Blah
      </NavItem>
      <NavItem eventKey={1} href={`${process.env.PUBLIC_URL}/SomePage`}>
        SomePage
      </NavItem>
    </Nav>
  </Navbar.Collapse>

Когда я помещаю курсор на NavItem, он подсвечивается, но я бы хотел, чтобы он был выделен после нажатия на него, чтобы сообщить мне, где я на странице.Итак: подвести итог, кто-нибудь знает, как сохранить выделенный Navitem выделенным?

Answer 1

Я думаю, во-первых, вам нужно использовать уникальный ключ события для каждого NavItem.

Nav имеет реквизит activeKey и обработчик onSelect, используйте это для установки activekey на Nav.

<Nav activeKey={(this.state.activeKey)} 
onSelect={e => {e.preventDefault(); this.handleSelect(e);}>

После этого вы получите active опору для активного элемента, по которому щелкнули, так что теперь его времядля некоторых CSS псевдо-селектор .

.NavItem:active{
  background-color: green; //some color of your choice//
}