0
votes

Ajouter une classe à plusieurs objets dans ReactJs lorsque vous avez cliqué sur

Je suis assez nouveau dans React et j'ai du mal à trouver une réponse appropriée à ma question. J'ai une liste avec plusieurs boutons (23) et je souhaite ajouter une classe .active à chaque bouton individuel sur lequel l'utilisateur a cliqué. J'enregistre les boutons "valeur" dans un tableau d'état pour une utilisation ultérieure. Ergo, il peut y avoir plusieurs boutons avec une classe active et aucun bouton avec la classe respective.

class DistrictModal extends React.Component {

constructor(props) {
    super(props);

    this.state = {
        selectedDistricts: []
    }
}

addDistrictToList = (e) => {
    this.setState(prevState => ({
        selectedDistricts: [...prevState.selectedDistricts, e]
    }));

}

render() {

<div className="list-group">
  <button type="button" onClick={() => this.addDistrictToList("1")} > 1. bezirk </button>
  <button type="button" onClick={() => this.addDistrictToList("2")} > 2. bezirk </button>
  <button type="button" onClick={() => this.addDistrictToList("3")} > 3. bezirk </button>
</div>

}}

javascript reactjs css

2 commentaires

onClick = {(e) => {e.target.classList.add (". active"); this.addDistrictToList ("1")} pouvez-vous l'essayer?

Cela permet d'accéder au texte du bouton, pas au bouton lui-même.

3 Réponses :

2
votes

Essayez ceci:

<button type="button" onClick={() => this.addDistrictToList("1")}
className={this.state.selectedDistricts.includes(1) ? 'active' : ''}> 1. bezirk </button>

Ceci ajoute la classe active , si la liste contient la valeur "1"

Source: StackOverflow

3 commentaires

Mon mal, je l'ai changé

Cela semble tellement logique, mais rien ne se passe lorsque le bouton est enfoncé ...

OK, je l'ai fait fonctionner changé "this.state.selectedDistricts.includes (1)" en this.state.selectedDistricts.includes ("1") ... merci beaucoup!

-1
votes

Ce que vous pouvez faire est de créer un tableau de boutons à rendre. Ensuite, pour chaque index, vous vous rappelez s'il a été cliqué ou non. Quelque chose à peu près dans le sens suivant (non testé, j'espère que vous comprenez l'essentiel, sinon je peux développer davantage):

class DistrictModal extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      selectedDistricts: [],
      buttons: [
        {title: 'bezirk'},
      ],
      clickedButtonIndices: [],
    }
  }

  addDistrictToList(i) {
    this.setState(prevState => ({
      selectedDistricts: [...prevState.selectedDistricts, i]
    }));
  }

  onButtonClick(e, i) {
    this.addDistrictToList(i);
    this.clickedButtonIndices.push(i);
  }

  render() {
    return (
      <div className="list-group">
        {
          this.buttons.map((button, i) => {
            const isActive = this.state.clickedButtonIndices.includes(i);
            return (
              <button key={i} type="button" onClick={(e) => this.onButtonClick(e, i)} className={isActive ? 'active' : ''}>{button.title}</button>
            );
          })
        }
      </div>
    );
  }
}

Vous devrez peut-être faire un this.forceUpdate () après le this.clickedButtonIndices.push (i); , car je ne pense pas que cela déclenchera un réexamen.

0 commentaires

0
votes

Voici le code plus propre avec React Hooks:

import React, { useState } from 'react'

const DistrictModal = () => {

const [selectedDistricts, setSelectedDistricts] = useState([])

const addDistrictToList = id => {
    setSelectedDistricts([
        ...selectedDistricts,
        id
    ])
}

const isDistrictSelected = id => {
    return selectedDistricts.indexOf(id) !== -1
}

return(
   <div className="list-group">
      <button type="button" className={isDistrictSelected(1) && 'active'} onClick={() => this.addDistrictToList(1)} > 1. bezirk </button>
      <button type="button" className={isDistrictSelected(2) && 'active'} onClick={() => this.addDistrictToList(2)} > 2. bezirk </button>
      <button type="button" className={isDistrictSelected(3) && 'active'} onClick={() => this.addDistrictToList(3)} > 3. bezirk </button>
    </div>
)
}

0 commentaires