Utworzyłem pasek boczny w Reakcie i zaprojektowałem go tak, że po kliknięciu łącza włącza się. Jednak chcę, aby były dezaktywowane po kliknięciu w inny link, jak to osiągnąć?

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)

0
lydal 2 kwiecień 2020, 14:30

3 odpowiedzi

Najlepsza odpowiedź

Zamiast tworzyć 8 navActives, tworzy jeden navActive z kluczem

Stan wewnętrzny:

state={
navActive: '0'
}

Wewnątrz renderowania dla

<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>
2
Akhil Nayak 2 kwiecień 2020, 11:53

Przeniosłem tekst i ikonę linków do osobnej tablicy, a kiedy przeglądam je i wyświetlam, dodaję aktywną klasę, jeśli NavActive pasuje do indeksu aktualnie wyświetlanej nawigacji, jeśli tak jest dodana aktywna klasa ,

Nie testowałem kodu, ponieważ nie mam wymaganych komponentów, ale powinieneś mieć przybliżone pojęcie, jak go uruchomić.

class Sidebar extends Component {
    state = {
        NavActive: null
    }

    links = [
        ['اضافه کردن فرصت شغلی جدید', <IoIosAdd style={linkStyles.AddIcon} />],
        ['داشبورد', <GiIceCube style={linkStyles.Icon} />],
        [' اطلاعات پایه', <FaNetworkWired style={linkStyles.Icon} />]
    ]

    render() {
        return (
            <NavPanel dark style={{ backgroundColor: '#2d2e2e', height: '100vh', float: 'right' }}>
                <NavTitle style={{ fontFamily: 'IranSans', textAlign: 'Center' }}>
                    لوگو اینجا قرار بگیرد
        </NavTitle>
                <NavSection>
                    <NavSectionTitle />
                    <NavSectionTitle />
                    {
                        this.links.map((l, idx) => {
                            let link = links[l];
                            return <NavLink key={idx} style={linkStyles.base} rightEl={link[1]} className={this.state.NavActive === l && 'active'}
                                onClick={() => this.setState({ NavActive: l })}>
                                {link[0]}
                            </NavLink>

                        })
                    }
                </NavSection>
            </NavPanel>
        )
    }
}
0
Adarsh Hegde 2 kwiecień 2020, 11:50

Użyj tego

<NavLink
  to="/hello"
  activeClassName="active"
>Hello</NavLink>
0
Mujibur Rehman Ansari 2 kwiecień 2020, 11:46