应用场景：
- 在网页初始化时，第一列表有蓝色底层；
- 当点击随机一个列表，该列表变成蓝色底层，并去掉之前有蓝底的列表。
效果图如下所示：
问题：
- 在初始化时，为一个列表设置蓝底。
- 在点击一个列表时，移除之前列表蓝底，并着色蓝底。
解决：
:hover，:active等伪类无法满足需求。通过操作ClassName的值，来控制列表的样式；设置一个变量pre，用于保存上一个蓝底的列表的id值（初始化为第一个）。
本文内容如下 ：
- 项目环境配置
- 使用document和evt操作节点
- 参考网站
1. 项目环境配置
设置项目环境。由于是React项目，在全局环境中安装:create-react-app ，然后运行:
npx create-react-app my-app //创建一个my-app的项目
2.使用document和evt操作节点
-
设置列表数据
通过unid库来设置唯一id,并设置数据，如下所示：
import uuid from 'uuid';
const items = [
{
"id": uuid(),
"title": "European Aluminum Profile",
},{
"id": uuid(),
"title": "Customized Aluminum Profile",
},{
"id": uuid(),
"title": "Windows and Doors Aluminum Profile",
},{
"id": uuid(),
"title": "Industrial Aluminum Accessories",
}
]
export default items;
- 设置样式
item{
background-color: #fff;
}
itemFocus{
background-color: blue;
}
- 列表HTML代码，如下：
{this.state.items.map( (item) => {
return <div>
<span id={item.id}
onClick={this.handleColor}
className="item">
{item.title}
</span>
</div>
})}
-
去掉颜色
去掉颜色函数，如下所示：
removeColor = () => {
document.getElementById(this.state.pre).setAttribute("class", "item");
}
-
着色
着色函数如下所示：
addColor = () => {
document.getElementById(this.state.pre).setAttribute("class", "item itemFocus");
}
在初始化时，着色；
componentDidMount(){
this.addColor();
}
在点击事件触发时，去掉上一个颜色，并对当前列表着色。
handleColor = (evt) => {
this.removeColor(); //去掉颜色
let evtId = evt.target.getAttribute('id');
this.setState({
pre: evtId,
}, function(){ this.addColor();});
}
3. 参考网站
js获取元素属性和自定义属性：https://blog.csdn.net/qq_24147051/article/details/77976844
react ref : https://reactjs.org/docs/refs-and-the-dom.html
Event.target: https://developer.mozilla.org/zh-CN/docs/Web/API/Event/target
Event.target api: https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-target
react setState callback: https://stackoverflow.com/questions/42038590/when-to-use-react-setstate-callback
注：不懂或不足之处请留言。
