Question

我有一个React-Redux应用程序，我创建了一个＆＃34; Sidebar＆＃34;我希望切换活动的组件＆＃39;每个菜单项的onClick。

我已切换现有代码的活动＆＃39;所有菜单项上的课程。

这是我的代码：

import React, {Component} from 'react'
import {connect} from 'react-redux'

export default class Sidebar extends Component {
constructor(props) {
    super(props)

    this.toggleClass= this.toggleClass.bind(this);
    this.state = {
      activeIndex: false
    }
}

toggleClass(e) {
    const currentState = this.state.activeIndex;
    this.setState({ activeIndex: !currentState });
};

render(){
    return(
        <div id="sidebar">
            <div className="nav">
                <ul className="dashboard-menu">
                    {this.renderSidebarMenuItems}
                    <li className={this.state.activeIndex ? 'active': null}  onClick={this.toggleClass}>Menu item 1</li>
                    <li className={this.state.activeIndex ? 'active': null}  onClick={this.toggleClass}>Menu item 2</li>
                    <li className={this.state.activeIndex ? 'active': null}  onClick={this.toggleClass}>Menu item 3</li>
                    <li className={this.state.activeIndex ? 'active': null}  onClick={this.toggleClass}>Menu item 4</li>
                </ul>
            </div>
        </div>
    )
}

}

我需要一个解决方案，只需点击每个菜单项，元素类就会变为“活跃”。所有其他菜单项都会返回空课程。

谢谢

Answer 1

您的activeIndex应该是索引号或键，如下所示：

import React, {Component} from 'react'
import {connect} from 'react-redux'

export default class Sidebar extends Component {
constructor(props) {
    super(props)

    this.toggleClass= this.toggleClass.bind(this);
    this.state = {
      activeIndex: 0
    }
}

toggleClass(index, e) {

    this.setState({ activeIndex: index });
};

render(){
    return(
        <div id="sidebar">
            <div className="nav">
                <ul className="dashboard-menu">
                    {this.renderSidebarMenuItems}
                    <li className={this.state.activeIndex==0 ? 'active': null}  onClick={this.toggleClass.bind(this, 0)}>Menu item 1</li>
                    <li className={this.state.activeIndex==1 ? 'active': null}  onClick={this.toggleClass.bind(this, 1)}>Menu item 2</li>
                    <li className={this.state.activeIndex==2 ? 'active': null}  onClick={this.toggleClass.bind(this, 2)}>Menu item 3</li>
                    <li className={this.state.activeIndex==3 ? 'active': null}  onClick={this.toggleClass.bind(this, 3)}>Menu item 4</li>
                </ul>
            </div>
        </div>
    )
  }

 }

使用ReactJS在菜单项上切换类

1 个答案: