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

J'ai travaillé à Réagir depuis quelques semaines maintenant, et j'ai obtenu la plupart de la syntaxe de base vers le bas (accessoires, états), j'ai du mal à dessiner des connexions avec certains concepts, notamment l'ajout de classes lorsqu'un état a changé. Je suis en train de construire un simon dit jeu, qui contient quatre boutons, le tout construit à l'aide d'un composant Button. Celles-ci sont initialement réglé pour avoir une opacité de 3 et un état actif de faux. Lorsque vous cliquez dessus, l'état "actif" devient vrai, mais je ne peux pas pour la vie de me comprendre comment ajouter une classe css qui peut donner au bouton d'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;
}

Alors, en ce moment, je voudrais simplement ajouter une catégorie en cliquant sur le bouton tout en gardant le "bouton" de la classe du composant. Quelqu'un peut-il aider?

OriginalL'auteur Ian Springer | 2017-03-01

7

Réagir a un couple de façons de le faire. La première est que suggéré par le crp henri Tudor Ilisoi, qui est tout simplement de la concaténation de chaînes.
La deuxième façon est de donner className un Object au lieu d'un string. De cette façon, est sans doute plus simple, mais nécessite l'ajout de la classnames module.
Vous pouvez l'installer avec soit npm install --save classnames ou yarn add classnames.
Vous pouvez l'importer avec:
```
import classNames from 'classnames';
```
Et puis vous pouvez l'utiliser de la manière suivante:
```
<button className={classNames({button: true, active: this.state.active})} />
```
La première paire d'accolades dit juste réagir que l'on passe d'une propriété dynamique, et la seconde est la normale à la syntaxe JavaScript pour les objets.
Notez que l'objet est enveloppé par le classNames() fonction.
Si l'on avait déclaré plus tôt, on pourrait tout aussi facilement 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} />
     );
}
```
Merci, c'est un très explication approfondie! Je suis en supposant que vous pouvez passer autant de paires clé/valeur dans la classe de l'objet que vous voulez? Et juste alors je suis bien comprendre, Bouton aura une classe de "bouton" quand ce.état.active est faux, mais deux classes "bouton" et "actif" quand ce.état.active est vrai?
qui est correct.
Comme une question de fait, j'ai du mal à obtenir que cela fonctionne avec n'importe quel nom de classe: const valueSpan = <span className={{small: true}}>label</span>; rend <span class="[object Object]">label</span>
J'ai édité la réponse. Vous devriez être capable de le voir en ligne en temps, juste après l'examen par les pairs. Espérons que cela aide, cheers!
c'est en ligne

OriginalL'auteur Mobius
1

changement className="button" à className={'button ' + f}

L'expression enfermés dans des accolades est évalué comme le javascript, et il produit une chaîne

Également noter que lors de l'utilisation de l'accolade de la syntaxe que vous n'avez pas à ajouter des guillemets "" autour de la valeur de l'attribut .

Lorsque votre JSX est analysée, de Réagir va générer le bon attribut HTML, par exemple class="button red".

OriginalL'auteur Tudor Ilisoi

Avez-vous essayé, passer un paramètre facultatif pour renderButtons, vérifier et l'ajouter à 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()}/>
  }
...

OriginalL'auteur Yooz

Vous devez vous connecter pour publier un commentaire.