Comment ajouter une classe CSS à un élément de sur - Réagir

Comment pouvez-vous ajouter une classe CSS à un élément existant RÉAGIR élément sur cliquez sur?

J'ai un JSFiddle créé: https://jsfiddle.net/5r25psub/

Dans le violon, le code ne fonctionne que si j'ai de la déclaration: this.setState({color:blue});

Je veux quelque chose comme this.setState({className: 'green'});
Ce que je fais mal?

Code:

    <html>
    <script>
        var Hello = React.createClass({
            getInitialState: function(){
                return {
                    color: 'blue'
                };
            },
            handleClick: function(){
                if (this.state.color === 'blue'){
                    this.setState({className = " green"});
                } else {
                    this.setState({color: 'blue'});
                }
            },
            render: function() {
                return <button className={this.state.className} onClick={this.handleClick}>My background is: {this.state.color}, Click me to change</button>;
            }
        });

        React.render(<Hello name="World" />, document.getElementById('container'));

    </script>
    <body>
    <script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<style>
.green {
    background-color: lightgreen;
}

.blue {
    background-color: lightblue;
}
</style>

    <div id="container">
        <!-- This element's contents will be replaced with your component. -->
    </div>
    </body>
    </html>

À l'intérieur de handleClick vous avez écrit className = " green" mais il devrait être className: "green"

OriginalL'auteur chrisrhyno2003 | 2016-03-30

Vous pouvez utiliser le module classnames trouve ici:

https://www.npmjs.com/package/classnames

De sorte que vous feriez quelque chose comme:

getClassNames() {
    return classNames({
        'blue':  this.state.clicked,
        'green':  !this.state.clicked
    });
},
render () {
    return <button className={this.getClassNames()} onClick={this.setState({clicked: !this.state.clicked})>
}

nice, na pas savoir à ce sujet, toujours codé qu'en moi, le problème n'est toujours bien. lol

OriginalL'auteur sma

1

Vous devez ajouter tous les paramètres de l'état de getInitialState, pour l'instant, la seule chose que vous avez à faire est color, donc this.state.color est la seule chose dans il

Lorsque vous définissez votre état de className: quelque chose, c'est la seule chose là maintenant, même la couleur est parti...et c'est pourquoi la couleur initiale est normal fade gris

vous avez une erreur de syntaxe dans setState ainsi, ce n'est pas
```
this.setState({className = " green"});
```
Il devrait être:
```
this.setState({className: " green"});
```
Enfin, React.render est obsolète, vous devez utiliser ReactDOM.render maintenant

Violon: https://jsfiddle.net/omarjmh/69z2wepo/36597/

Je suis un peu confus sur comment puis-je récupérer le classList. Ne de l'élément.getClassList() travail à Réagir? Ou est-il un autre moyen pour le faire ?
pourquoi avez-vous besoin d'une liste de classes? Regardez le code dans le violon que j'ai posté, vous avez eu la mauvaise ressources externes, ouvrez la console et voir ce qu'il dit, c'est tout ce qu'il a pris pour moi de répondre à votre question

OriginalL'auteur JordanHendrix
0

https://jsfiddle.net/ajvf50s6/3/

Plus probablement, il est préférable de faire une vérification fondée sur le className, pas sur le color état de la propriété:
```
handleClick: function(){
    if (this.state.className === 'blue'){
        this.setState({className: "green"});
    } else {
        this.setState({className: "blue"});
    }
}
```
Aussi, comme @Omarjmh mentionné, vous avez une erreur dans votre code. {className = " green"} est mauvaise affectation.

Parfait! Cela aide certainement. J'ai eu un suivi de la question - Comment puis-je ajouter une classe css à un élément existant qui a déjà des classes. Par exemple, un élément <div class="green"></div> , je tiens à ajouter la classe centre_align de sorte qu'il ressemble aujourd'hui: <div class="green centre_align"> </div> Est-ce possible ?
Je vous suggère de regarder vers github.com/JedWatson/classnames
Aussi, c'est pour un seul élément. serait-il nécessaire de préserver les états de plusieurs éléments?

OriginalL'auteur Alexandr Lazarev
0

Plutôt que d'utiliser deux variables d'état, vous pouvez faire comme ceci.

Depuis l'état initial de la couleur est le bleu, vous pouvez modifier la handleClick fonction :
```
handleClick: function(){
 if (this.state.color === 'blue'){
  this.setState({color : "green"});
 } else {
   this.setState({color: 'blue'});
 }
}
```
Et, pour la classe, considérons une variable :
```
let colorClass= this.state.color === "blue" ? "blue" : "green" 
```
Maintenant, remplacez le nom de la classe comme ci-dessous et vous devez placer cet objet où vous appelez div classe.
```
return <button className={colorClass} onClick={this.handleClick}>My background is: {this.state.color}, Click me to change</button>;
```
J'espère que ça fonctionne bien.

OriginalL'auteur Vinay J Rao

Vous devez vous connecter pour publier un commentaire.