onCick в React изменяет все состояния классов в реакции

Question

У меня создается боковая панель в реагировании, и я хочу изменить их состояние на активное при нажатии на каждый из них, но когда я нажимаю на любой элемент, все они внезапно активируются. как это исправить?

lass Sidebar extends Component {
  state = {
    active: 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.active ? 'active' :' ' }
          onClick={() => this.setState({ active: !this.state.active })}>
             اضافه کردن فرصت شغلی جدید
          </NavLink>
          <NavLink key='2' style={linkStyles.base} rightEl={<GiIceCube style={linkStyles.Icon} />}className={this.state.active ? 'active' :' ' }
          onClick={() => this.setState({ active: !this.state.active })}>
           داشبورد
          </NavLink>
        </NavSection>
      </NavPanel>

    )
  }
}

export default Radium(Sidebar)

Answer 1

Это потому, что вы ссылаетесь на один и тот же ключ в вашем штате для всех навигационных ссылок. Есть много вариантов, чтобы это исправить, но просто вы можете сохранить разные ключи для разных ссылок в вашем штате.

lass Sidebar extends Component {
  state = {
    NavOneActive: false,
    NavTwoActive: 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.NavOneActive, NavTwoActive: false})}>
             اضافه کردن فرصت شغلی جدید
          </NavLink>
          <NavLink key='2' style={linkStyles.base} rightEl={<GiIceCube style={linkStyles.Icon} />}className={this.state.NavTwoActive? 'active' :' ' }
          onClick={() => this.setState({ NavTwoActive: !this.state.NavTwoActive, NavOneActive: false})}>
           داشبورد
          </NavLink>
        </NavSection>
      </NavPanel>

    )
  }
}

export default Radium(Sidebar)

Answer 2

Потому что ваше состояние глобально сводится к этим компонентам. Вам нужно создать компонент обтекания с состоянием и вашим компонентом отдельно друг от друга.