我如何获得状态发生变化的元素

Question

我有一种情况，一旦我点击一张图片，我希望它有一个边框。如果我再次单击它，我希望删除该边框。但是，如果单击另一个图像，我也希望删除（或“移动”）该边框！

我想有几种方法可以解决这个问题 - 我不知道如何实现：

1. 清除所有图像的边框
2. 跟踪先前的状态并以这种方式获取元素

我使用的是从曾祖父母那里传下来的状态，所以我不确定我是否可以发布所有脚本 - 我会尝试将其保留在 sn-ps 中。

我的图片：使用“下一个/图片”

    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>
    );

我的状态变化：

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;
}