React动态修改className的值

应用场景：

• 在网页初始化时，第一列表有蓝色底层；
• 当点击随机一个列表，该列表变成蓝色底层，并去掉之前有蓝底的列表。

效果图如下所示：

问题：

1. 在初始化时，为一个列表设置蓝底。
2. 在点击一个列表时，移除之前列表蓝底，并着色蓝底。

解决：
: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

注：不懂或不足之处请留言。