如何在Reactjs中获取任何点击事件上的上一个点击元素

Question

我正在尝试在我的应用程序中进行单个选择。我有一个网格，里面有一些图像。当我点击一个图像时，它的父图像(div背景色(变为红色。我描述了这个事件，它被选中了。我想在单击任何位置时取消选择上一个项目。若点击的图片是我的一个项目，那个么新的项目应该被选中，前一个项目应该被取消选中。如果单击的元素不是我的项目之一，则应该取消选择刚才的previous。当我选择一个项目，然后单击其他项目时，它正在工作。但是，当我选择一个项目，然后单击我的项目时，它不起作用。在本研究中，我的prevClickedElement参数是指上一个点击元素的前一个。我不知道为什么在上下文中的clickElement和Piece组件中的removePrevSelectedSquare中更新它时状态为空。因为我的应用程序有多个组件和图像，我添加到这里。我不确定这是正确的方式。因为当我选择一个项目组件时，创建的项目计数次数在本例中为15次。这是性能问题吗？

Answer 1

我认为一个好的方法是创建一个组件全局状态来保存当前元素的唯一id，并创建一个函数来设置单击时的元素id。之后，您可以创建一个函数，每当调用该函数时重置该状态，并将该函数作为DOM事件在上级div(映像的父级(中实现。以下是代码片段形式的ideia：

import React from 'react';
function Stackoverflow(props) {
const [selectedPicture, setSelectedPicture] = React.useState(null);
function resetSelectedPicture() {
setSelectedPicture(null)
}    
return (
<div onClick={resetSelectedPicture}>
{pictures.map((picture, index) => {
const {id, src} = picture;
return (
<>
<img
src={src} 
key={index} 
id={id}
className={
selectedPicture.id === id
? 'selected-picture'
: 'unselected-picture'
}
onClick={setSelectedPicture(
() => picture
)}
/>
</>
);
})}
</div>
);
}
export default Stackoverflow;