web-dev-qa-db-fra.com

Comment ajouter ou supprimer un nom de classe sur un événement dans ReactJS

Je suis assez nouveau pour React et j'ai du mal à convertir ma pensée à partir de js standard.

Dans mon composant React, j'ai l'élément suivant:

<div className='base-state' onClick={this.handleClick}>click here</div>

Le comportement que je recherche consiste à ajouter une classe supplémentaire au clic. Ma première idée a été d'essayer d'ajouter la classe dans la fonction de gestionnaire de clic, par ex.

handleClick : function(e) {
   <add class "click-state" here>
}

Je n'ai pas pu trouver d'exemples qui font quelque chose de similaire, donc je suis assez sûr de ne pas y penser de la bonne manière.

Est-ce que quelqu'un peut-il me montrer la bonne direction?

javascriptnode.jsreactjs
19
Finglish

La liste des classes peut être dérivée de l'état du composant. Par exemple:

var Component = React.createClass({
  getInitialState: function() {
    return {
      clicked: false
    };
  },

  handleClick: function() {
    this.setState({clicked: true});
  },

  render: function() {
    var className = this.state.clicked ? 'click-state' : 'base-state';
    return <div className={className} onClick={this.handleClick}>click here</div>;
  }
});

Appeler this.setState déclenchera un nouveau rendu du composant.

33
Felix Kling

Ajouter l'attribut ref à div:

en classe:

 myRef = React.createRef();

en rendu:

<div ref={this.myRef} className="base-state" onClick={this.handleClick}>click here</div>

Ensuite, dans la méthode handleClick, obtenez l'élément par référence et utilisez la propriété JavaScript classList:

handleClick = () => this.myRef.classList.add('click-state')

https://reactjs.org/docs/refs-and-the-dom.html

Vous pouvez utiliser juste un Vanilla JS: event.target et classList

handleClick = event => event.target.classList.add('click-state');

render() {
  return <div className="base-state" onClick={this.handleClick}>click here</div>;
}

https://developer.mozilla.org/en-US/docs/Web/API/Event/target

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

7
Adrian Bienias