React中如何使用:active、:focus样式实现图片画廊选中态保留？

问题根源 #

你当前用的伪类无法实现持久选中效果，原因如下：

• :active 仅在鼠标按下未松开的短暂时间段生效，鼠标松开后样式自动消失
• :focus 需要元素本身是可聚焦元素，img默认没有聚焦属性，即使手动添加tabindex属性实现聚焦，点击页面其他区域后元素失焦，样式也会丢失

要实现持久的选中态，需要结合JS存储选中状态，动态绑定样式实现。

解决步骤 #

1. 新增选中态样式 #

修改你的样式代码，新增独立的选中类样式：

image: {
    '&:hover': {
        border: '1px solid green'
    },
    // 新增持久选中态样式
    '&.selected': {
        border: '1px solid green'
    }
},
selected: {}

2. 组件state存储选中标识 #

在你的类组件中新增state字段，存储当前选中的图片唯一标识（可以用图片src、遍历索引等，这里以src为例）：

constructor(props) {
    super(props);
    this.state = {
        // 初始值为null，代表没有选中的图片
        selectedImgSrc: null
    }
}

3. 动态绑定样式与选中事件 #

修改遍历渲染的img组件，添加点击选中逻辑，动态匹配选中样式：

// 此处为遍历渲染逻辑示例，可适配你自身的遍历写法
{yourImgList.map(img => (
    <img
        className={`${classes.image} ${this.state.selectedImgSrc === img ? classes.selected : ''}`}
        alt='My image'
        src={img}
        // 点击时更新选中状态，重复点击当前选中图片可取消选中
        onClick={() => this.setState(prev => ({
            selectedImgSrc: prev.selectedImgSrc === img ? null : img
        }))}
        onDoubleClick={() => this.openImage()}
    />
))}

如果你的技术栈用的是函数式组件，对应替换为useState存储选中状态即可，逻辑完全一致。

内容的提问来源于stack exchange，提问作者Edenco