通过复选框创建价格过滤器

Question

import { useState } from 'react';

const Shop = ({capes}: Props)=>{

const[checkVal1, setCheckVal1]= useState(0);
    const[checkVal2, setCheckVal2]= useState(0);
    const[checkVal3, setCheckVal3]= useState(0);
    const[checkVal4, setCheckVal4]= useState(0);
    const[checkVal5, setCheckVal5]= useState(0);

    const handleCheckData=(cape:any)=>{
        if(cape.price>=0 && cape.price>=checkVal1){
            return 1;
        }
        else if(cape.price>=200 &&  cape.price<=checkVal2){
            return 1;
        }
        else if(cape.price>=300 &&  cape.price<=checkVal3){
            return 1;
        }
        else if(cape.price>=400 &&  cape.price<=checkVal4){
            return 1;
        }
        else if(cape.price<= checkVal5){
            return 1;
        }
        // else{
        //     return 1;
        // }
    }


return(
<div>
<div>
<div className='flex flex-col space-y-4'>

{/* 1st checkbox */}
<div>
<input type='checkbox' onClick={()=>setCheckVal1(199)} />
<label > {'>'} .99</label>
</div>   

{/* 2nd checkbox */}
<div>
<input type='checkbox' onClick={()=>setCheckVal2(299)}/>
<label >.00 - .99</label>
</div> 

{/* 3rd checkbox */}
<div>
<input type='checkbox' onClick={()=>setCheckVal3(399)}/>
<label >.00 - .99</label>
</div> 

{/* 4th checkbox */}
<div>
<input type='checkbox' onClick={()=>setCheckVal4(499)}/>
<label >.00 - .99</label>
</div> 

{/* 5th checkbox */}
<div>
<input type='checkbox' onClick={()=>setCheckVal5(500)}/>
<label > {'<'} .00</label>
</div>                            
</div>

这是我要使用复选框过滤的数据。 Cape 是另一个组件，我们从中检索价格，例如 'cape.price or cape.name'.

有没有办法过滤它们，我们也可以重置它们，就像如果我们点击一个复选框，它会显示结果，再次点击它会删除价格过滤器？

{capes.map((cape) => (

             handleCheckData(cape) ? 

               <div
                 key={cape.id}
                  className='text-white transition duration-300 ease-in-out group hover:text-orange-500' >
                    <div className='flex flex-col items-center space-y-4 cursor-pointer'>
                    <div className='-ml-8 transition duration-300 ease-in-out group-hover:scale-110 transform-gpu'>
                    <RenderedMineman
                     capes={[cape]}
                     rotation={
                     cape.type ===
                     CapeTypeEnum.Cape
                     ? 'back'
                     : 'front'
                     }
                     />
                     </div>
                    <div className='space-y-1 text-center'>
                    <Text
                    as='h3'
                    tag='h3'
                    className='text-current'
                    >
                    {cape.name}
                    </Text>
                    </div>
                    <div className='space-y-1 text-center text-gray-700'>
                    <Text as='h4' tag='p'>
                    ${toDollars(cape.price)}
                    </Text>
                    </div>
                    </div>
                    </Link>
                    </div>: ''
                    ))}{' '}
</div>
)
}

Answer 1

您可以在映射之前对数组使用过滤函数： capes.filter((cape) => handleCheckData(cape)).map((cape) => (....

通过复选框创建价格过滤器

Creating price filter through checkboxes

typescript

reactjs

next.js

tailwind-css