Reactstrap 改变活动的 NavLink onClick

Posted 2023-03-23

【中文标题】Reactstrap 改变活动的 NavLink onClick

【英文标题】：Reactstrap changing active NavLink onClick

【发布时间】：2020-04-13 13:31:58

【问题描述】：

是否有直接的方法来更改哪个选项卡处于活动状态？此示例默认启用“链接 1”。

const Navi = () => 


  const startChangeVis = id => 
    // do something in here to make clicked NavLink active 
  

  return(
  <div>
      <Nav tabs>
        <NavItem>
          <NavLink id="a" href="#" onClick=() =>  startChangeVis('a') active>Link 1</NavLink>
        </NavItem>
        <NavItem>
          <NavLink id="b" href="#"  onClick=() =>  startChangeVis('b') >Link 2</NavLink>
        </NavItem>
        <NavItem>
          <NavLink id="c" href="#"  onClick=() =>  startChangeVis('c') >Link 3</NavLink>
        </NavItem>
      </Nav>
  </div>
  )

在 ReactStrap Git 页面上，它显示以下内容：

NavItem.propTypes = 
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  active: PropTypes.bool,
  // pass in custom element to use

它呈现 html 如下：

<a id="a" href="#" class="nav-link active">Link 1</a>

【参考方案1】：

解决方案：

const Navi = () => 
  const [acn1,setAcn1] = useState('active') // assumes link 1 is default active
  const [acn2,setAcn2] = useState('')
  const [acn3,setAcn3] = useState('')

  const startChangeVis = id => 
    setAcn1('')
    setAcn2('')
    setAcn3('')
    if(id === 'a')      setAcn1('active')
    else if(id === 'b') setAcn2('active')
    else if(id === 'c') setAcn3('active')
  

  return(
  <div>
      <Nav tabs>
        <NavItem>
          <NavLink id="a" href="#" onClick=() =>  startChangeVis('a') className=acn1>Link 1</NavLink>
        </NavItem>
        <NavItem>
          <NavLink id="b" href="#"  onClick=() =>  startChangeVis('b') className=acn2>Link 2</NavLink>
        </NavItem>
        <NavItem>
          <NavLink id="c" href="#"  onClick=() =>  startChangeVis('c') className=acn3>Link 3</NavLink>
        </NavItem>
      </Nav>
  </div>
  )

BootStrap 能够在活动类中解析其他强制类，如下所示

<a id="b" href="#" class="active nav-link">Link 2</a>