2
votes

Comment ajouter et supprimer dynamiquement une classe en un clic avec React?

J'ai une liste de liens.

J'ajoute une classe sur clic, appelée "is-active". En même temps, je voudrais supprimer tous les "is-actifs" existants à l'exception du lien sur lequel j'ai cliqué. Il ne peut y avoir qu'un seul élément avec la classe "is-active" car cette page sera "en direct". (Utilisation de bulma css)

Voici le code que j'ai essayé jusqu'à présent. Il s'agit d'ajouter des classes mais pas de les supprimer.

class Menu extends Component {

    constructor(props) {
        super(props);
        this.state = {addClass: false}
    };

    handleClick(e) {
        if(e.target.class === 'is-active'){
            e.target.className = '';
            console.log('remove')
        }else{
            e.target.className = 'is-active';
            console.log('add class')
        }
    }  

    render() {
        <ul className="menu-list">
            { this.props.getList.map(list =>
                <Link onClick={this.handleClick.bind(this)} key={list.id} to="">{list.title}</Link>                    
            )}
        </ul>
    }

}

export default SideMenu;

Un conseil serait tellement apprécié.

javascript reactjs button classname

0 commentaires

3 Réponses :

4
votes

Si vous utilisez React évitez la manipulation DOM directement . La seule chose que vous changez devrait être l'état, laissez React s'occuper du DOM.

Pour changer les noms de classe, je recommanderais une bibliothèque appelée classnames ( https://github.com/JedWatson/classnames ). Il n'occupera que 588 octets dans la taille de votre bundle.

Si vous ne souhaitez pas utiliser de bibliothèque tierce, utilisez les modèles littéraux de JavaScript pour ce faire.

Exemple: p >

<div className={ `list-item ${this.state.active ? "active" : ""}` }>...</div>

0 commentaires

11
votes

Vous devez éviter de toucher le DOM par vous-même, laissez React le faire pour vous.

Vous voulez garder un signal dans l'état qui vous indique si un élément de la liste est actif ou non, et utiliser ce signal pour définir ou non une classe dans votre phase de rendu:

state = {
  activeId: null  // nothing selected by default, but this is up to you...
}

handleClick(event, id) {
  this.setState({ activeId: id })
}

render() {
  <ul className="menu-list">
  {
    this.props.getList.map(list =>
      <Link key={ list.id }
            className={ this.state.activeId === list.id && 'is-active' }
            onClick={ this.handleClick.bind(this, list.id) } 
            to="">
        { list.title }
      </Link>                    
    )
  }
  </ul>
}

De cette façon, à chaque rendu , le id de chacun l'élément de votre accessoire getList est comparé à celui que vous gardez dans votre état, alors:

s'il s'agit de l'identifiant actif, il attribue la classe "is-active";
si ce n'est pas l'actif, il efface le className précédent (au cas où il était 'est-actif';

J'espère que cela aide :)

0 commentaires

2
votes

Si vous utilisez react-router pour gérer la navigation dans votre application, vous pouvez utiliser le composant qui accepte un accessoire pour ajouter une classe lorsque l'URL correspond.

Accueil

Pour utiliser NavLink dans votre projet, vous devez l'importer

import { NavLink, Route } from 'react-router-dom'

0 commentaires