如何获得状态改变的元素

Question

我有一个情况，一旦我点击一个图像，我希望它得到一个边界。如果我再次点击它，我希望边框被移除。但是，我也希望该边界被删除(或"移动")，如果另一个图像点击代替!

我想有几种方法可以做到这一点-我不确定如何实现这两种方法:

1. 清除所有图片的边框
2. 跟踪之前的状态并获取元素

我使用的状态是从祖辈传下来的，所以我不确定我可以发布所有的脚本-我会尽量保持在片段中。

my images: using 'next/image'

return(
<div key={attr} id={attrprops.attrChoice+':'+attr}>
<Image
src={imgSourceUrl}
alt={attrprops.alt}
width={attrprops.w}
height={attrprops.h}
onClick={()=>{  attrprops.setButtonClick(!attrprops.buttonClick);
attrprops.setBorder(attrprops.selectedAttr==attr ? false : true);
attrprops.setSelectedAttr(attr);
}}
/>
<br></br>
<div className='flex justify-center align-center'>{attr}</div>
</div>
);

my state change:

useEffect(()=>{
if (border&&buttonClick){
document.getElementById(`body_type:${selectedAttr}`).className = 'border-2 border-blue-500';
publishprops.setAttrNumber(4);
}
else if (!border&&buttonClick){
document.getElementById(`body_type:${selectedAttr}`).className = 'border:none';
publishprops.setAttrNumber(2);
}
},[border])

的方式，它是目前，它只添加边框选定的图像。真的不知道该走哪条路…

Answer 1

为了有效地使用React，你需要稍微改变一下你对状态的看法。你的模板应该易于阅读，它应该清楚什么是意图。

看起来你的例子很简单。要么是高亮显示的图像，要么没有。

考虑这个简化的例子:

import React, { useState } from 'react';
const images = [
'1.png',
'2.png',
'3.png',
'4.png',
'5.png',
];
const MyComponent = () => {
const [selectedImage, setSelectedImage] = useState(null);
return (
<ul>
{images.map(src => (
<img
key={src}
className={`
my-image
${selectedImage === src ? 'active' : ''}
`}
onClick={() => setSelectedImage(
selectedImage => (
selectedImage !== src
? src
: null
)
)}
/>
))}
</ul>
);
};

当selectedImage为null时，表示没有图像被点击。在点击时，我们要么将其设置为被点击的图像，要么将其设置回null，如果相同的图像已被点击。然后你会应用与active类图像的边界。简化的CSS:

.my-image {
border: 5px solid transparent;
}
.my-image.active {
border-color: red;
}