0
votes

Existe-t-il un moyen de parcourir des divs et d'obtenir la Div qui a été cliqué pour ajouter une classe?

J'ai cinq divs que je veux avoir une classe active lorsque vous avez cliqué. J'ai déjà une classe active dans mon CSS, mais je ne sais pas comment j'ajouterais cela dans mon code

import React from 'react';
import './filter.scss';


const Filter = (props) => {



    return (
        <div className="filter">
            <div className="filter__alle active">
                <p>Alle</p> <span>2</span>
            </div>
            <div className="filter__eiendom ">
                <p>Eiendom</p> <span>2</span>
            </div>
            <div className="filter__familie ">
                <p>Familie</p> <span>2</span>
            </div>
            <div className="filter__kontrakt">
                <p>Kontrakt</p> <span>2</span>
            </div>
            <div className="filter__husarbeid ">
                <p>Husarbeid</p> <span>2</span>
            </div>
        </div>
    );
}

export default Filter;

reactjs

1 commentaires

Un seul élément de la liste peut être actif? (Si j'ai cliqué non un élément actif, l'élément actif doit-il désactiver?)

3 Réponses :

0
votes

Ajouter une classe active comme celui-ci xxx

0 commentaires

0
votes

Je pense que OP souhaite cartographier des données via un objet et définir différents gestionnaires de facteurs pour chacun d'eux. Pour ce cas, vous pouvez simplement basculer l'attribut de classe de l'élément cible actuel. Fait référence à mon code, xxx

0 commentaires

1
votes

Je pense que la meilleure façon de sauvegarder l'indice DIV actif dans l'état:

import * as React from "react";
import "./styles.css";

const data = [
  { name: "Alle", text: 2 },
  { name: "Eiendom", text: 2 },
  { name: "Familie", text: 2 },
  { name: "Kontrakt", text: 2 },
  { name: "Husarbeid", text: 2 }
];

const Filter = props => {
  const [activIndex, setActiveIndex] = React.useState(null);
  const handleClick = index => {
    console.log(index);
    setActiveIndex(index);
  };
  return (
    <div className="filter">
      {data.map((item, index) => (
        <div
          key={index}
          className={
            activIndex === index ? "filter__item active" : "filter__item"
          }
          onClick={() => handleClick(index)}
        >
          <p>{item.name}</p> <span>{item.text}</span>
        </div>
      ))}
    </div>
  );
};

export default Filter;

0 commentaires