web-dev-qa-db-fra.com

Comment ajouter une classe CSS à un élément au clic - React

Comment ajouter une classe CSS à un élément REACT existant au clic? 

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

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

Je veux quelque chose comme this.setState({className: 'green'}); Qu'est-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>
javascripthtmlcssreactjs
5
chrisrhyno2003

Vous pouvez utiliser le module classnames trouvé ici:

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

Donc, 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})>
}
4
sma

Vous devez ajouter tous les paramètres d'état à getInitialState. Pour le moment, la seule chose que vous avez est color, donc this.state.color est la seule chose qui s'y trouve.

Lorsque vous définissez votre état sur className: quelque chose, c'est la seule chose qui s'y trouve maintenant, même la couleur a disparu ... et c'est pourquoi la couleur initiale est le gris neutre normal

vous avez aussi une erreur de syntaxe dans setState, ce n'est pas

this.setState({className = " green"});

CA devrait etre:

this.setState({className: " green"});

Enfin, React.render est obsolète, vous devez maintenant utiliser ReactDOM.render

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

1
JordanHendrix

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

Très probablement, vous feriez mieux de faire une vérification basée sur la className, pas sur la propriété color state:

handleClick: function(){
    if (this.state.className === 'blue'){
        this.setState({className: "green"});
    } else {
        this.setState({className: "blue"});
    }
}

En outre, comme @Omarjmh l'a mentionné, vous avez une faute de frappe dans votre code. {className = " green"} est une mauvaise affectation. 

0
Alexandr Lazarev

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

Étant donné que l'état initial de la couleur est bleu, vous pouvez modifier la fonction handleClick comme suit:

handleClick: function(){
 if (this.state.color === 'blue'){
  this.setState({color : "green"});
 } else {
   this.setState({color: 'blue'});
 }
}

Et, pour le className, considérons une variable:

let colorClass= this.state.color === "blue" ? "blue" : "green"

Maintenant, remplacez le className comme ci-dessous et vous devez inclure cet objet où vous appelez div class.

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.

0
Vinay J Rao