时间戳

首页 > 解决方案 > 有没有办法循环遍历 div 并获取单击以添加类的 div？

reactjs - 有没有办法循环遍历 div 并获取单击以添加类的 div？

问题描述

我有五个 div，我希望在单击时拥有一个活动类。我的 css 中已经有一个活动类，但我不知道如何在我的代码中添加它

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

解决方案

我认为更好的方法是在状态下保存活动 div 索引：

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;

推荐阅读