时间戳

首页 > 解决方案 > 通过单击与在 reactjs 中使用挂钩相关的按钮来过滤图像

reactjs - 通过单击与在 reactjs 中使用挂钩相关的按钮来过滤图像

问题描述

我有来自文件数据 json 的图像，它们在项目渲染时出现在页面中，但是当我单击它上面的按钮以过滤没有图像出现时

我创建 if 条件，当我单击第一个按钮时，它会通过 pramater 调用“all”，因此它应该显示所有图像，但是当我单击其他按钮时，它应该显示它们的类别包括按钮通过的 pramater 的图像，但是当我调试它时数组为空

  "portfolio" : [
      {
          "id":1,
          "image": "./images/Portfolio/portfolio-img1.jpg",
          "category":["html","wordpress","mobile"]
      },
      {
          "id":2,
          "image": "./images/Portfolio/portfolio-img2.jpg",
          "category":["html","photoshop"]
      },
      {
          "id":3,
          "image": "./images/Portfolio/portfolio-img3.jpg",
          "category":["html","wordpress"]

      },
      {
          "id":4,
          "image": "./images/Portfolio/portfolio-img4.jpg",
          "category":["html","mobile"]

      }

  ] ,

  ```
  function Portfolio() {
      const [Images, setImages] = useState([])
  
     useEffect(()=>{
         axios.get('data/data.json').then(res =>{

      setImages(res.data.portfolio)
     })

    },[])
    const handleClick  = (categoryName)=>{
      let test = Images;
      console.log( categoryName);
 
          if(categoryName === 'all'){
              setImages(test)
              console.log(test)
          }else{
              test = Images.filter((img,i)=>{
                  img.category.includes(categoryName)
              })
              setImages(test)
              console.log(test)
          }
     }
       const portfolioImages = Images.map((item, i)=>{
          return(
              <BoxDev key={i}>
                  <Img src={item.image} alt=""/>
                  <Overlay>
                      <BoxSpan>
                          Show Image
                      </BoxSpan>
                  </Overlay>
              </BoxDev>
        )
     })
  
     return (
      <Section>
          <Title><TitleSpan>My</TitleSpan> Portfolio</Title>
          <List>
              <ListItem active onClick={() => handleClick('all')}>All</ListItem>
              <ListItem  onClick={() => handleClick("html" )}>HTML</ListItem>
              <ListItem  onClick={() => handleClick("photoshop")}>Photoshop</ListItem>
              <ListItem  onClick={() => handleClick("wordpress")}>Wordpress</ListItem>
              <ListItem  onClick={() => handleClick("mobile")}>Mobile</ListItem>
          </List>
          
          <div className="box">
              {portfolioImages}
          </div>
      </Section>
   )
}

标签： reactjs

解决方案

当您使用过滤后的图像Images调用时，您会丢失原始图像。setImages您需要保存categoryName到状态并按其值进行过滤。

const [filter, setFilter] = useState('all');

...


const handleClick  = (categoryName)=>{
    setFilter(categoryName);
}


const portfolioImages = (filter === 'all' ? Images : Images.filter(img => img.category.includes(filter))).map((item, i)=>{
          return(
              <BoxDev key={i}>
                  <Img src={item.image} alt=""/>
                  <Overlay>
                      <BoxSpan>
                          Show Image
                      </BoxSpan>
                  </Overlay>
              </BoxDev>
        )
     })

推荐阅读