REACT - переключить класс onclick

Я пытаюсь выяснить, как переключить активный класс onClick, чтобы изменить свойства CSS.

Я взял много подходов и прочитал много ответов SO. Использование jquery было бы относительно простым, однако я не могу понять, как это сделать, реагируя. Мой код ниже. Может ли кто-нибудь посоветовать, как я должен это делать?

Без создания нового компонента для каждого элемента можно это сделать?

class Test extends Component(){

    constructor(props) {

    super(props);
    this.addActiveClass= this.addActiveClass.bind(this);

  }

  addActiveClass() {

    //not sure what to do here

  }

    render() {
    <div>
      <div onClick={this.addActiveClass}>
        <p>1</p>
      </div>
      <div onClick={this.addActiveClass}>
        <p>2</p>
      </div>
        <div onClick={this.addActiveClass}>
        <p>3</p>
      </div>
    </div>
  }

}

Ответы

Ответ 1

Используй гос. Реагирует на документы здесь.

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.addActiveClass= this.addActiveClass.bind(this);
        this.state = {
            active: false,
        };
    }
    toggleClass() {
        const currentState = this.state.active;
        this.setState({ active: !currentState });
    };

    render() {
        return (
            <div 
                className={this.state.active ? 'your_className': null} 
                onClick={this.toggleClass} 
            >
                <p>{this.props.text}</p>
            </div>
        )
  }
}

class Test extends Component {
    render() {
        return (
            <div>
                <MyComponent text={'1'} />
                <MyComponent text={'2'} />
            </div>
        );
    }
}

Ответ 2

Ну, ваш addActiveClass должен знать, что было нажато. Что-то вроде этого могло бы работать (обратите внимание, что я добавил информацию, которую divs активны как массив состояний, и что onClick теперь передает информацию о том, что было нажато как параметр, после чего состояние соответственно обновляется - есть, конечно, более разумные способы сделайте это, но вы получите идею).

class Test extends Component(){

    constructor(props) {

        super(props);
        this.state = {activeClasses: [false, false, false]};
        this.addActiveClass= this.addActiveClass.bind(this);

      }

  addActiveClass(index) {
      const activeClasses = [...this.state.activeClasses.slice(0, index), !this.state.activeClasses[index], this.state.activeClasses.slice(index + 1)];
      this.setState({activeClasses});
  }

render() {
        const activeClasses = this.activeClasses.slice();
        return (
                <div>
                  <div className={activeClasses[0]? "active" : "inactive"} onClick={() => this.addActiveClass(0)}>
                    <p>0</p>
                  </div>
                  <div className={activeClasses[1]? "active" : "inactive"} onClick={() => this.addActiveClass(1)}>
                    <p>1</p>
                  </div>
                    <div  onClick={() => this.addActiveClass(2)}>
                    <p>2</p>
                  </div>
                </div>);
  }
}

Ответ 3

Я бы предпочел использовать "& &" -оператор в inline if-statement. По моему мнению, это дает чистую кодовую базу таким образом.

Как правило, вы можете делать что-то вроде этого

render(){
return(
  <div>
    <button className={this.state.active && 'active'}
      onClick={ () => this.setState({active: !this.state.active}) }>Click me</button>
  </div>
)
}

Просто помните, что функция стрелки - это функция ES6 и не забудьте установить значение this.state.active в конструкторе класса() {}

this.state = { active: false }

или если вы хотите ввести css в JSX, вы можете сделать это таким образом

<button style={this.state.active && style.button} >button</button>

и вы можете объявить переменную стиля json

const style = { button: { background:'red' } }

помните, используя camelCase в стилях таблицы JSX.

Ответ 4

React имеет понятие состояния компонентов, поэтому, если вы хотите его переключить, выполните setState:

constructor(props) {
  super(props);

  this.addActiveClass= this.addActiveClass.bind(this);
  this.state = {
    isActive: false
  }
}

addActiveClass() {
  this.setState({
    isActive: true
  })
}

Ответ 5

Вышеупомянутые ответы будут работать, но на всякий случай вам нужен другой подход, попробуйте имя класса: https://github.com/JedWatson/classnames

Ответ 6

используя React, вы можете добавить класс переключения к любому идентификатору/элементу, попробуйте

style.css

.hide-text{
    display: none !important;
    /* transition: 2s all ease-in 0.9s; */
  }
.left-menu-main-link{
    transition: all ease-in 0.4s;
}
.leftbar-open{
    width: 240px;
    min-width: 240px;
    /* transition: all ease-in 0.4s; */
}
.leftbar-close{
    width: 88px;
    min-width:88px;
    transition: all ease-in 0.4s;
}

fileName.js

......
    ToggleMenu=()=>{
             this.setState({
                isActive: !this.state.isActive
              })
              console.log(this.state.isActive)
        }
        render() {
            return (
                <div className={this.state.isActive===true ? "left-panel leftbar-open" : "left-panel leftbar-close"} id="leftPanel">
                    <div className="top-logo-container"  onClick={this.ToggleMenu}>
                            <span className={this.state.isActive===true ? "left-menu-main-link hide-from-menu" : "hide-text"}>Welcome!</span>
                    </div>

                    <div className="welcome-member">
                        <span className={this.state.isActive===true ? "left-menu-main-link hide-from-menu" : "hide-text"}>Welcome<br/>SDO Rizwan</span>
                    </div>
    )
    }
......

Ответ 7

Хороший пример поможет лучше понять вещи:

HTML

<div id="root">
</div>

CSS

.box {
  display: block;
  width: 200px;
  height: 200px;
  background-color: gray;
  color: white;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.box.green {
  background-color: green; 
}

Код реакции

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {addClass: false}
  }
  toggle() {
    this.setState({addClass: !this.state.addClass});
  }
  render() {
    let boxClass = ["box"];
    if(this.state.addClass) {
      boxClass.push('green');
    }
    return(
        <div className={boxClass.join(' ')} onClick={this.toggle.bind(this)}>{this.state.addClass ? "Remove a class" : "Add a class (click the box)"}<br />Read the tutorial <a href="http://www.automationfuel.com" target="_blank">here</a>.</div>       
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

Ответ 8

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

class Test extends Component(){
  state={
  active:false, 
 }
  toggleClass() {
    console.log(this.state.active)
    this.setState=({
     active:true,
   })
  }

    render() {
    <div>
      <div onClick={this.toggleClass.bind(this)}>
        <p>1</p>
      </div>
    </div>
  }

}

Ответ 9

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

Ниже находится файл вкладки

import React, { Component } from 'react';


class Tab extends Component {

    render(){
        const tabClassName = "col-xs-3 tab-bar";
        const activeTab = this.props.activeKey === this.props.keyNumber ? "active-tab" : null;
        return (
                <div 
                    className = {'${tabClassName} ${activeTab}'}
                    onClick={()=>this.props.onClick(this.props.keyNumber)}
                >
                    I am here
                </div>
        );
    }
}


export default Tab;

Файл вкладок...

import React, { Component } from 'react';
import Tab from './tab';

class Tabs extends Component {

    constructor(props){
        super(props);

        this.state = {
            currentActiveKey: 0,
            tabNumber: 2
        };

        this.setActive = this.setActive.bind(this);
        this.setTabNumber = this.setTabNumber.bind(this);
    }

    setTabNumber(number){
        this.setState({
            tabNumber: number
        });
    }

    setActive (key){
        this.setState({
            currentActiveKey: key 
        });
    }

    render(){
        let tabs = [];
        for(let i = 0; i <= this.state.tabNumber; i++){
            let tab = <Tab key={i} keyNumber={i} onClick={this.setActive} activeKey={this.state.currentActiveKey}/>;
            tabs.push(tab);
        }
        return (
            <div className="row">
                {tabs}
            </div>
        );
    }
}


export default Tabs;

ваш индексный файл...

import React from 'react';
import ReactDOM from 'react-dom';
import Tabs from './components/tabs';


ReactDOM.render(
    <Tabs />
  , document.querySelector('.container'));

и CSS

.tab-bar {
    margin: 10px 10px;
    border: 1px solid grey;
}

.active-tab {
    border-top: 1px solid red;
}

Это скелет чего-то, что я хочу улучшить, поэтому увеличение значения tabNumber за пределы 4 сломает CSS.