Question

是否可以直接更改哪个选项卡处于活动状态？此示例默认将“链接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可以在活动类中与其他必需类进行如下解析

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

Reactstrap更改活动的NavLink onClick

1 个答案: