Question

我想向用 ReactJS 编写的菜单元素添加' active '类。我尝试使用常规的JS方法执行此操作，但失败了。单击任何

标记，应该会导致从所有

中删除“ active ”类，并且仅将保留/添加到一个列表中触发点击的代码。

注意：我知道这似乎很幼稚，但我只是从ReactJS开始。请忽略愚蠢。

import React, { Component }  from 'react';

class Sidebar extends Component{

render(){
    return(
        <div className="sidebarContainer p-2">                
            <div className="mainMenu">
                <ul className="levelOne pl-0">
                    <li className="mb-3 pl-2 menuTitle active" id="MenuTitle1">
                        ...
                    </li>
                    <li className="mb-3 pl-2 menuTitle" id="MenuTitle2" onClick={this.clickMenu.bind(this,'MenuTitle2')}>
                        ...
                    </li>
                    <li className="mb-3 pl-2 menuTitle" id="MenuTitle3" onClick={this.clickMenu.bind(this,'MenuTitle3')}>
                        ...
                    </li>
                </ul>
            </div>               
        </div>
    );
}

clickMenu(id){
    // Add class 'active' on the clicked <li>, and remove from all other <li>
}
}


 export default Sidebar;

我看到了类似的问题 here ，但这无济于事。

Answer 1

您可以维护单击菜单项的状态：

clickMenu(id){
 this.setState({activeMenu: id})
}

然后，像这样定义className：

className={
  this.state.activeMenu == id {/* eg. "MenuTitle1" */}
  ? 'mb-3 pl-2 menuTitle active' 
  : 'mb-3 pl-2 menuTitle'
}

Answer 2

想法是，将单击的项目的ID存储在state变量中，并在支票上加上className。如果项目的ID与状态值相同，则仅分配className active。

这样写：

class Sidebar extends Component{

    constructor() {
        super()
        this.state = {
            activeItem: 'MenuTitle1'
        }
    }

    clickMenu(id){
        // Add class 'active' on the clicked <li>, and remove from all other <li>
        this.setState({
            activeItem: id,
        })
    }

    getClassName(id) {
        if(id === this.state.activeItem) return 'mb-3 pl-2 menuTitle active'
        return 'mb-3 pl-2 menuTitle'
    }

    render(){
        return(
            <div className="sidebarContainer p-2">                
                <div className="mainMenu">
                    <ul className="levelOne pl-0">
                        <li
                            id="MenuTitle1"
                            className={this.getClassName('MenuTitle1')}
                            onClick={this.clickMenu.bind(this,'MenuTitle1')}>
                            ...
                        </li>
                        <li 
                            id="MenuTitle2"
                            className={this.getClassName('MenuTitle2')}
                            onClick={this.clickMenu.bind(this,'MenuTitle2')}>
                            ...
                        </li>
                        <li 
                            id="MenuTitle3"
                            className={this.getClassName('MenuTitle3')}
                            onClick={this.clickMenu.bind(this,'MenuTitle3')}>
                            ...
                        </li>
                    </ul>
                </div>               
            </div>
        );
    }

}

Answer 3

就像Bhojendra建议的那样，在状态内存储链接到显示器的数据，然后当您想使用setState方法更新组件的显示时，这将再次触发渲染（反应样式）。

import React, { Component } from 'react';
import ReactDOM from "react-dom";

class Sidebar extends Component {
  constructor() {
    super();
    this.state = {
      activeMenuId: "MenuTitle1"
    };
  }

  render() {
    return (
      <div className="sidebarContainer p-2">
        <div className="mainMenu">
          <ul className="levelOne pl-0">
            <li className={`mb-3 pl-2 menuTitle ${this.state.activeMenuId === "MenuTitle1" ? "active" : ""}`} id="MenuTitle1" onClick={this.clickMenu.bind(this, 'MenuTitle1')}>
              1
                    </li>
            <li className={`mb-3 pl-2 menuTitle ${this.state.activeMenuId === "MenuTitle2" ? "active" : ""}`} id="MenuTitle2" onClick={this.clickMenu.bind(this, 'MenuTitle2')}>
              2
                    </li>
            <li className={`mb-3 pl-2 menuTitle ${this.state.activeMenuId === "MenuTitle3" ? "active" : ""}`}  id="MenuTitle3" onClick={this.clickMenu.bind(this, 'MenuTitle3')}>
              3
                    </li>
          </ul>
        </div>
      </div>
    );
  }

  clickMenu(id) {
    // Add class 'active' on the clicked <li>, and remove from all other <li>
    this.setState({activeMenuId: id});
  }
}


export default Sidebar;
ReactDOM.render(<Sidebar />, document.body);

Answer 4

使用initialstate和setState的另一种方法。

    import React, { Component } from "react";

    class Sidebar extends Component {
      constructor(props) {
        super(props);
        this.initialState = {
          MenuTitle1: "active",
          MenuTitle2: "",
          MenuTitle3: ""
        };
        this.state = this.initialState;
      }

      render() {
        return (
          <div className="sidebarContainer p-2">
            <div className="mainMenu">
              <ul className="levelOne pl-0">
                <li
                  className={`mb-3 pl-2 menuTitle ${this.state.MenuTitle1} `}
                  id="MenuTitle1"
                  onClick={this.clickMenu.bind(this, "MenuTitle1")}
                >
                  one
                </li>
                <li
                  className={`mb-3 pl-2 menuTitle ${this.state.MenuTitle2}`}
                  id="MenuTitle2"
                  onClick={this.clickMenu.bind(this, "MenuTitle2")}
                >
                  two
                </li>
                <li
                  className={`mb-3 pl-2 menuTitle ${this.state.MenuTitle3}`}
                  id="MenuTitle3"
                  onClick={this.clickMenu.bind(this, "MenuTitle3")}
                >
                  three
                </li>
              </ul>
            </div>
          </div>
        );
      }

      clickMenu(id) {
        this.setState(this.initialState);
        this.setState({
          [id]: "active"
        });
      }
    }

    export default Sidebar;

在ReactJS中将CSS类添加到JSX

4 个答案: