javascript - onClick 一旦单击链接，就会对其他类停用使用react

Question

我在 React 中创建了一个侧边栏，并将其设计为当我单击链接时，它会被激活。但是，我希望它们在单击另一个链接后被停用，如何实现？

class Sidebar extends Component {
    state = {
      NavOneActive: false,
      NavTwoActive: false,
      NavThreeActive:false,
      NavFourActive:false,
      NavFiveActive:false,
      NavSixActive:false,
      NavSevenActive:false,
      NavEightActive:false
    }

  render () {
    return (
      <NavPanel dark style={{ backgroundColor: '#2d2e2e', height: '100vh', float:'right'}}>
        <NavTitle style={{ fontFamily: 'IranSans', textAlign: 'Center' }}>
       لوگو اینجا قرار بگیرد
        </NavTitle>
        <NavSection>
          <NavSectionTitle />
          <NavSectionTitle />
          <NavLink key='1' style={linkStyles.base} rightEl={<IoIosAdd style={linkStyles.AddIcon} />} className={this.state.NavOneActive ? 'active' :' ' }
          onClick={() => this.setState({ NavOneActive : !this.state.active })}>
             اضافه کردن فرصت شغلی جدید
          </NavLink>
          <NavLink key='2' style={linkStyles.base} rightEl={<GiIceCube style={linkStyles.Icon} />} className={this.state.NavTwoActive? 'active' :' ' }
          onClick={() => this.setState({ NavTwoActive: !this.state.active })}>
           داشبورد
          </NavLink>
          <NavLink key='3' style={linkStyles.base} rightEl={<FaNetworkWired style={linkStyles.Icon} />} className={this.state.NavThreeActive ? 'active' :' ' }
          onClick={() => this.setState({ NavThreeActive : !this.state.active })}>
           اطلاعات پایه
          </NavLink>
          ...
        </NavSection>
      </NavPanel>

    )
  }
}

export default Radium(Sidebar)

Answer 1

不要制作 8 个 navActive，而是制作一个具有 key 的 navActive

州内:

state={
navActive: '0'
}

内部渲染

<NavLink key='1' style={linkStyles.base} rightEl={<IoIosAdd style={linkStyles.AddIcon} />} className={this.state.navActive == '1' ? 'active' :' ' }
          onClick={() => this.setState({ navActive:'1' })}>
   اضافه کردن فرصت شغلی جدید
          </NavLink>
          <NavLink key='2' style={linkStyles.base} rightEl={<GiIceCube style={linkStyles.Icon} />} className={this.state.navActive == '2' ? 'active' :' ' }
          onClick={() => this.setState({ navActive:'2' })}>
           داشبورد
          </NavLink>
          <NavLink key='3' style={linkStyles.base} rightEl={<FaNetworkWired style={linkStyles.Icon} />} className={this.state.navActive == '3' ? 'active' :' ' }
          onClick={() => this.setState({ navActive:'3' })}>
           اطلاعات پایه
          </NavLink>