javascript - React 中的 onClick 会更改 React 中的所有类状态

Question

我在 react 中创建了一个侧栏，我想在单击每个项目时将其状态更改为事件状态，但是当我单击任何项​​目时，所有项目都会突然被激活。如何解决这个问题？

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

这是因为您在您的状态中为所有导航链接引用相同的键。有很多选项可以解决此问题，但简单地说，您可以为您所在州的不同链接保留不同的 key 。

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)