當您在反應中單擊父元素時是否可以 select 子元素，並在事件發生后將 class 添加到父元素

Question

我正在制作一個帶有反應的游戲，它是一個 memory 游戲，您可以在其中匹配圖像。所以我要存檔的是，當我單擊 div 時，它會選擇 div 的子級（圖像），然后將 class 添加到父級和然后將 class 添加到孩子本身。 根據游戲邏輯，我必須首先 select 子元素，然后如果通過一些條件，我然后添加一個 class 到它和它的父元素。 看看我目前擁有的代碼，但它不起作用，請幫助我。 `

let currentElement;
const imageclick=(e)=>{
    //select current image
    currentElement=e.target.firstElementChild;
    // some game  logic the add class to child and parent
    //add class to parent
    currentElement.closest("div").classList.add("show");
    //add class to child
    currentElement.classList.remove("hidden")
}

const app=()=>{
    return(
        <div className="imgDiv transition" key={i} onClick={imageclick}>
        <img src={img} alt="" className="tileImage hidden" />
        </div>
    )
}

`

Answer 1

有多種方法。

一種方法是將圖像存儲在對象數組中。 該數組用於渲染所有圖像。 您甚至可以打亂數組以使順序隨機。

在您的組件內部，您有一個 state。 這個 state 跟蹤當前選擇的陣列圖像的索引。 初始的 state 可以是null表示沒有當前選擇的圖像。

在遍歷圖像時，檢查每個圖像是否selectedImageIndex等於當前圖像的索引。 如果是這樣，請通過一些額外的課程。

（您不需要在圖像上切換hidden的 class。使用 div 上的show class 來顯示或隱藏子圖像）。

將當前圖像的index傳遞給div的onClick處理程序中的imageClick function 。 每當我們單擊圖像時，我們都希望將圖像的index設置為selectedImageIndex 。

該組件現在將重新渲染並將 class 添加到單擊的div 。

---

編輯

我已根據您的評論修改了答案。 此示例允許將 2 個索引存儲到跟蹤所選圖像的 state 中。

每當您單擊相同的圖像時，就會取消選擇該圖像。 每當您單擊另一個圖像時，它都會將其index添加到 state。

在useEffect掛鈎中，您可以評估與索引對應的圖像是否具有相似的src或其他匹配的屬性。

（我建議創建一個更強大的系統，您可以在其中說哪些圖像是相同的，而不是取決於 URL 是否相同。例如，兩個圖像可以相同但具有不同的 URL）

const images = [
  {
    id: 'A',
    src: 'your-image.jpg',
    alt: 'Something about your image'
  },
  {
    id: 'B'
    src: 'your-other-image.jpg',
    alt: 'Something about your image'
  },
  {
    id: 'A' // The match to the other A
    src: 'the-other-image-that-matches-the-first.jpg',
    alt: 'Something about your image'
  }
];

const App = () => {
  const [selectedImageIndexes, setSelectedImageIndexes] = useState([null, null]);

  const imageClick = index => {
    setSelectedImageIndex(currentIndexes => {
      // If the same index is clicked, deselect all.
      if (currentIndexes.includes(index)) {
        return [null, null];
      }

      // If no indexes have been set.
      if (currentIndexes.every(index => index === null)) {
        return [index, null];
      }

      // Set the second clicked image.
      return [currentIndexes[0], index];
    });
  };

  useEffect(() => {
    // If both indexes are set.
    if (selectedImageIndexes.every(index => index !== null) {
      
      /**
       * With the indexes in the selectedImageIndexes state,
       * check if the images corresponding to the indexes are matches.
       */
      if (selectedImageIndexes[0].id === selectedImageIndexes[1].id) {
        // Match!
      }
    }
  }, [selectedImageIndexes]);

  return (
    <div className="images">
      {images.map((image, index) => {
        const className = selectedImageIndex.includes(index) ? 'show' : '';

        return (
          <div className="imgDiv transition" key={`img-div-${index}`} onClick={() => imageClick(index)}>
            <img src={image.src} className="tileImage" alt={image.alt} />
          </div>
        );
      })}
    </div>
  )
};