Reactstrap 改变活动 NavLink onClick

Question

有没有直接的方法来更改哪个选项卡处于活动状态？此示例默认激活 'Link 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>

Answer 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 is able to parse in the active class with other mandatory class as follows

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

Reactstrap 改变活动 NavLink onClick

Reactstrap changing active NavLink onClick

node.js

twitter-bootstrap

reactjs

reactstrap