Добавление CSS-класса в JSX в ReactJS

Question

Я хотел добавить класс ' active ' к элементу меню, записанный в ReactJS . Я попытался сделать это с помощью обычного метода 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;

Я видел похожий вопрос здесь , но это не могло мне помочь.

Answer 1

Еще один способ просто сделать, используя 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;

Answer 2

Идея в том, чтобы сохранить идентификатор кликаемого элемента в переменной state и поставить проверку с помощью 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

Подобно тому, как Бхойендра предложил хранить данные, связанные с вашим дисплеем, в вашем состоянии, тогда, когда вы захотите обновить отображение вашего компонента, используйте метод 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

Вы можете сохранить состояние для выбранного пункта меню:

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'
}