web-dev-qa-db-fra.com

Ajouter une classe lorsque le bouton a été cliqué dans react.js

Je travaille sur React depuis quelques semaines maintenant et, même si j'ai la majeure partie de la syntaxe de base (accessoires, états), j'ai du mal à établir des liens avec certains concepts, notamment l'ajout de classes lorsqu'un état a changé. J'essaie de créer un jeu Simon dit, qui contient quatre boutons, tous construits à l'aide d'un composant Button. Celles-ci sont initialement configurées pour avoir une opacité de 0,3 et un état actif faux. Lorsque l'on clique dessus, l'état "actif" devient vrai, mais je ne peux pas pour la vie me dire comment ajouter une classe CSS qui peut donner au bouton une opacité totale. Voici mon code:

class App extends Component {
  constructor(){
    super();
    this.state = {
      active: false
    }
  }
  handleClick(){
    this.setState({active: !this.state.active})
  }
  renderButtons(i, f){
    return <Button value={i} className="button" id={f} active= {this.state.active} onClick={() => this.handleClick()}/>
  }
  render() {
    return (
      <div className="App">
        {this.renderButtons("red", "buttonRed")}
        {this.renderButtons("blue", "buttonBlue")}
        {this.renderButtons("green", "buttonGreen")}
        {this.renderButtons("yellow", "buttonYellow")}
      </div>
    );
  }
}

Et mon css:

.button{
  width: 100px;
  height: 45px;
  opacity: .3;
  margin: 0 auto;
  margin-bottom: 30px;
}
#buttonRed{
  background: red;
}
#buttonBlue{
  background: blue;
}
#buttonGreen{
  background: green;
}
#buttonYellow{
  background: yellow;
}

Donc, à ce moment, je voudrais simplement ajouter une classe en cliquant sur le bouton tout en gardant la classe "button" pour le composant. Quelqu'un peut-il aider?

javascriptcssreactjs
4
Ian Springer

React a plusieurs façons de le faire. La première est suggérée par Tudor Ilisoi, qui consiste simplement à concaténer des chaînes. La seconde consiste à donner à className une Object au lieu de string. Cette méthode est certes plus simple, mais vous devez ajouter le module classnames. Vous pouvez l’installer avec npm install --save classnames ou yarn add classnames. Vous pouvez l’importer avec:

import classNames from 'classnames';

Et ensuite, vous pouvez l'utiliser de la manière suivante:

<button className={classNames({button: true, active: this.state.active})} />

La première paire d'accolades indique simplement que nous passons une propriété dynamique, et la seconde correspond à la syntaxe JavaScript normale des objets. Notez que l'objet est encapsulé par la fonction classNames(). Si nous l'avions déclaré plus tôt, nous pourrions tout aussi bien faire:

render(){
    const classes = classNames({
        button: true, // we always want this class
        active: this.state.active, // only add this class if the state says so
     });

     return (
          <button className={classes} />
     );
}
7
Mobius

remplacez className="button" par className={'button ' + f}

L’expression entre accolades est évaluée en javascript et produit une chaîne.

Notez également que lorsque vous utilisez la syntaxe entre accolades, il n'est pas nécessaire d'ajouter des guillemets doubles "" autour de la valeur de l'attribut.

Lorsque votre JSX est analysé, React génère le bon attribut HTML, par exemple class="button red".

1
Tudor Ilisoi

Avez-vous essayé, passez un paramètre optionnel à renderButtons, vérifiez-le et ajoutez à la classe:

...
 renderButtons(i, f, c){
    var cssClass =  c&&c!=""? "button " + c : "button";   
    return <Button value={i} className={cssClass}  id={f} active= {this.state.active} onClick={() => this.handleClick()}/>
  }
...
0
Yooz