entire 全部数据模块==》过滤filter

效果：

React\airbib\src\views\entire\c-cpns\entire-filter\index.jsx

import React, { memo, useState } from 'react'
import classNames from "classnames"

import { FilterWrapper } from './style'
import filterData from "@/assets/data/filter_data.json"

const EntireFilter = memo(() => {

const [selectItems, setSelectItems] = useState([])

function itemClickHandle(item) {
const newItems = [...selectItems]
if(newItems.includes(item)){
        const itemIndex = newItems.findIndex(filterItem => filterItem === item)
        newItems.splice(itemIndex,1)
}else{
        newItems.push(item)
}

setSelectItems(newItems)
}
return (
<FilterWrapper>
<div className='filter'>
    {
    filterData.map((item,index)=>{
        return (
            <div 
                key={item}
                className={classNames("item",{active:selectItems.includes(item)})}
                onClick={e=>itemClickHandle(item)}
                >
                {item}
      </div>
        )
    })
    }
</div>
</FilterWrapper>
)
})

export default EntireFilter

React\airbib\src\views\entire\c-cpns\entire-filter\style.js

import styled from "styled-components";

export const FilterWrapper = styled.div`
	/* position: fixed;
	z-index: 99;
	left: 0;
	right: 0;
	top: 80px; */
	
	display: flex;
	align-items: center;
	height: 48px;
	padding-left: 16px;
	border-bottom: 1px solid #f2f2f2;
	background-color: #ffff;
	.filter{
		display: flex;
		.item{
			margin: 0 4px 0 8px;
			padding: 6px 12px;
			border: 1px solid #dec0e0;
			border-radius: 4px;
			color: #484848;
			cursor: pointer;
			&.active{
				background: #008489;
				border: 1px solid #008489;
				color: #ffffff;
			}
		}
	}
`

React\airbib\src\assets\data\filter_data.json

[
  "人数",
  "可免费取消",
  "房源类型",
  "价格",
  "位置区域",
  "闪定",
  "卧室/床数",
  "促销/优惠",
  "更多筛选条件"
]