帶有Javascript和React的過濾器按鈕-有解無憂

再會！我希望能在我正在進行的專案中獲得一些幫助。我創建了一個過濾器功能，以便當用戶單擊按鈕時，他們可以根據專案型別過濾我的專案。

我能夠讓“ALL”按鈕作業，但其他按鈕不起作用。預期的輸出是當我單擊按鈕時，它會過濾掉其他專案并保留與類別匹配的專案。但是當前的輸出是當我單擊按鈕時，專案消失了。

這是我的代碼：

    import React, {useState} from "react";
import ReactDOM from "react-dom";
import styles from "./projects.module.scss";
import cards from "./allData";


function Projects() {
 
  const [state, setState] = useState(cards);

  const handleBtns = (e) => {
      let word = e.target.value;
      function isCardActive() {
        for(const card of cards) {
            if (cards.category === "FEATURED") {
                return true;
            } else if (cards.category === "WEB APP") {
                return true;
            } else if (cards.category === "MOBLE APP"){
                return true
            }
        } 
      };

      if(word === 'All') { 
          setState(cards)
      } else if(word === 'Featured') {
          const filtered = cards.filter(isCardActive);
          setState(filtered);

    }  else if(word === 'webApp') {
        const filtered = cards.filter(isCardActive);
        setState(filtered);

  } else if(word === 'mobileApp') {
    const filtered = cards.filter(isCardActive);
    setState(filtered);
  }
}


    return(
        <div className={styles.projects} id="projectHash">
           <section>
               <h3>PROJECTS</h3>
            </section>

            
             <section id={styles.filterMain}>
            <button className={`${styles.filterBox} ${styles.active}`} onClick={handleBtns} type="button" value="All"  >VIEW ALL</button> 
            <button className={styles.filterBox} onClick={handleBtns} type="button" value="Featured"  >FEATURED</button>
            <button className={styles.filterBox} onClick={handleBtns} type="button" value="webApp"  >WEB APP</button>
            <button className={styles.filterBox} onClick={handleBtns} type="button" value="mobileApp" >MOBILE APP</button>  
                 
            </section>

            <section>

           {state.map((cards) => (
                <div className={styles.projectcard} key={cards.id} >

                <h4>Project Name: {cards.title} </h4>
                <br/>
                <h4>{cards.image}</h4>
               
            </div>

           ))}
           </section>
            
        </div>
    )
};

export default Projects;

這是包含資料陣列的檔案的代碼

import card1 from "../../assets/card1.jpg";
import card2 from "../../assets/card2.jpg";
import card3 from "../../assets/card3.jpg";
import card4 from "../../assets/card4.jpg";
import card5 from "../../assets/card5.jpg";
import card6 from "../../assets/card6.jpg";

 const cards = [
    {
        title: 'VICTORY FOLIO',
        category: ['WEB APP', 'FEATURED'],
        description: 'Lorem ipsum dolro sit amt, consestcuer elit',
        image: card1,
        id: 1

    },
    {
        title: 'IN WHOLENESS PRACTICE',
        category: 'WEB APP',
        description: 'Lorem ipsum dolro sit amt, consestcuer elit',
        image: card2,
        id: 2
    },
    {
        title: 'TRIBE HAIRCARE',
        category: ['WEB APP', 'MOBILE APP', 'FEATURED'],
        description: 'Lorem ipsum dolro sit amt, consestcuer elit',
        image: card3,
        id: 3
    },
    {
        title: 'TRIBE SKINCARE',
        category: ['WEB APP', 'MOBILE APP'],
        description: 'Lorem ipsum dolro sit amt, consestcuer elit',
        image: card4,
        id: 4
    },
    {
        title: 'BUG TRACKER',
        category: 'WEB APP',
        description: 'Lorem ipsum dolro sit amt, consestcuer elit',
        image: card5,
        id: 5
    },
    {
        title: 'PATIENT PORTAL',
        category: 'MOBILE APP',
        description: 'Lorem ipsum dolro sit amt, consestcuer elit',
        image: card6,
        id: 6
    }

];

export default cards;

uj5u.com熱心網友回復：

所以有很多事情使它無法作業，但基本上你的 isCardActive 什么都不做，因為它沒有收到當前的卡片專案來比較。

我在這里創建了一個沙盒，它應該如何作業，使用 useState 和 useEffect 在過濾器（currentCard）更改時過濾結果。我已經洗掉了樣式，但是您可以很容易地將其添加回來。

代碼在這里：

const [cards, setCards] = useState(allCards);
const [currentCard, setCurrentCard] = useState("All");

const handleBtns = (e) => {
  let word = e.target.value;
  setCurrentCard(word);
};

useEffect(() => {
  if (currentCard === "All") {
    setCards(allCards);
  } else {
    const filtered = allCards.filter((card) => {
      return (
        card.category === currentCard || card.category.includes(currentCard)
      );
    });
    setCards(filtered);
  }
}, [currentCard]);

return (
  <div className="App">
    <div id="projectHash">
      <section>
        <h3>PROJECTS</h3>
      </section>

      <section>
        <button onClick={handleBtns} type="button" value="All">
          VIEW ALL
        </button>
        <button onClick={handleBtns} type="button" value="FEATURED">
          FEATURED
        </button>
        <button onClick={handleBtns} type="button" value="WEB APP">
          WEB APP
        </button>
        <button onClick={handleBtns} type="button" value="MOBILE APP">
          MOBILE APP
        </button>
      </section>

      <h3>Current: {currentCard}</h3>

      <section>
        {cards.map((card) => (
          <div key={card.id}>
            <h4>Project Name: {card.title} </h4>
          </div>
        ))}
      </section>
    </div>
  </div>
);

uj5u.com熱心網友回復：

您可以使用 Array.filter() 方法，還可以更改輸入值以匹配類別，因為它們在卡片中定義，大寫字母和空格之間

const handleBtns = (e) => {
const word = e.target.value;
if (word === "All") setState(cards);
else {
  const filteredCards = cards.filter(({ category }) => {
    return category.includes(word);
  });
  setState(filteredCards);
}

};

uj5u.com熱心網友回復：

這是我使用useState 掛鉤的解決方案的沙箱：codesandbox

我會注意：

比較字串值時，請確保它們使用相同的格式/大寫：

'Feature' === 'FEATURE' //false

'FEATURE' === 'FEATURE' //true

規范化物件中的資料。JavaScript 是動態型別的，所以可以這樣做：

card.category = 'string'
card.category = ['STRING']

確保資料型別相同，就無需在過濾器函式中進行額外檢查。

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/433887.html

標籤：javascript 数组反应按钮筛选

上一篇：SwiftUI：帶有影像的按鈕在真實iPhone上出現灰色邊框，但在模擬模式下作業正常

下一篇：如何處理多個洗掉按鈕JS