web-dev-qa-db-fra.com

REACT - bascule la classe onclick

J'essaie de comprendre comment basculer une classe active onClick pour modifier les propriétés CSS.

J'ai adopté de nombreuses approches et lu de nombreuses réponses SO. En utilisant jquery, cela serait relativement simple, cependant, je ne peux pas le faire avec react. Mon code est ci-dessous. Quelqu'un peut-il me dire comment faire?

Sans créer un nouveau composant pour chaque élément, est-il possible de le faire?

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

}
javascriptreactjs
32
peter flanagan

Utilisez l'état. Les documents de Reacts sont ici .

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>
        );
    }
}
41
cssko

Eh bien, votre addActiveClass doit savoir ce qui a été cliqué. Quelque chose comme ceci pourrait fonctionner (notez que j'ai ajouté les informations indiquant que les div sont actives en tant que tableau d'état, et qu'onClick transmet maintenant les informations sur lesquelles un clic a été effectué en tant que paramètre, après quoi l'état est mis à jour en conséquence - il existe certainement des moyens plus intelligents de faites-le, mais vous avez l'idée).

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>);
  }
}
5
Bane Bojanić

Je préférerais utiliser "&&" -operator sur une instruction if en ligne. À mon avis, cela donne une base de code plus propre de cette façon.

En général, vous pourriez faire quelque chose comme ça

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

N'oubliez pas que la fonction de flèche est une fonctionnalité ES6 et n'oubliez pas de définir la valeur 'this.state.active' dans la classe constructor () {}

this.state = { active: false }

ou si vous voulez injecter des CSS dans JSX, vous pouvez le faire de cette façon

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

et vous pouvez déclarer le style json variable

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

n'oubliez pas d'utiliser camelCase sur des feuilles de style JSX.

3
Jimi Pajala

React a un concept d'état de composants, donc si vous voulez le changer, faites une setState:

constructor(props) {
  super(props);

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

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

Dans votre composant, utilisez this.state.isActive pour rendre ce dont vous avez besoin.

Cela devient plus compliqué lorsque vous souhaitez définir l'état dans le composant n ° 1 et l'utiliser dans le composant n ° 2. Il suffit de creuser davantage pour réagir au flux de données unidirectionnel et éventuellement au redux qui vous aidera à le gérer.

2
dhorelik

Les réponses ci-dessus fonctionneront, mais juste au cas où vous voudriez une approche différente, essayez classname: https://github.com/JedWatson/classnames

2
KadoBOT

vous pouvez ajouter basculer classe ou basculer état sur clic

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

}
1
Rizo

Un bon échantillon aiderait à mieux comprendre les choses:

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

Code de réaction

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"));
1
Alex Jolig

en utilisant React, vous pouvez ajouter une classe de basculement à n’importe quel élément/id 

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

NomFichier.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>
    )
    }
......
1
Rizo

J'ai commencé à apprendre React récemment et je voulais construire un onglet juste pour voir jusqu'où mes connaissances étaient allées. Je suis tombé sur cela et j'ai décidé de mettre en œuvre quelque chose sans redux. Je pense que les réponses ne reflètent pas ce que l’opération veut réaliser. Il veut seulement un composant actif, mais les réponses ici vont activer tous les composants. Je lui ai donné un coup de feu.

Ci-dessous un fichier de tabulation

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;

Le fichier d'onglets ...

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;

votre fichier d'index ...

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


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

et le css

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

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

Ceci est un squelette de quelque chose que je veux améliorer, donc augmenter le nombre de tabN au-delà de 4 cassera le css.

0
J.Ewa