React 点击元素后设置「已点击」样式
tags
Tool
date
‣
最近在开发一款 Figma 的文字搜索、替换插件；希望在用户点击搜索结果项后，点击过的项显示已点击样式，帮助用户更好的查找、定位文本图层。
查了资料，都是实现「选中」逻辑的方案（单选，选中一个时其他选项设置为未选中的样式）。
后来发现只要在点击时直接设置 `className` 属性就可实现。
listItemHandleClick(item) {
item.target.className = 'clicked'
}
const listItems = list.map((node, index) =>
<li onClick={this.listItemHandleClick.bind(node)} key={node['id'] + ':' + index.toString()} dangerouslySetInnerHTML={{ __html: node['characters'] }} ></li>
)
// css
.clicked {
color: rgba(40, 40, 40, 0.3);
}插件地址：