当您在反应中单击父元素时是否可以 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>
  )
};