谈谈react操作onMouseEnter、onMouseLeave结合css里的hover

悠悠 2022-06-10 03:48 226阅读 0赞

#### react对于每个html元素都添加了很多事件处理函数，这些事件网上一搜就都出来了，这里简单说下在react中利用js进行操作类似于css里的hover所使用的事件。 ####

#### 比如这样一个需求，有以下3个div： ####

网上很多例子只是简单说了下一个组件是如何操作类似于:hover选择器，没错就是使用onMouseEnter和onMouseLeave，那么现在我要实现这样一个效果：  
1. 鼠标不在这三个div上的时候，这个三个div里的字体显示红色  
2. 鼠标放在class为a的组件上的时候，它里面的字体颜色不变，其他的div变成绿色

#### 也许是我以前写前端的时候用习惯了JQuery，处处都是dom操作，现在使用react的时候，一时之间转不过来弯，就好像从面向过程编程过度到面向对象编程一样，我想了一下，想想react改变页面的内容是根据状态，于是我利用onMouseEnter和onMouseLeave事件来动态改变状态hover，然后根据hover的状态值去给这三个div分别添加一个class，这里的class样式在css文本中要写在其他class的下面，因为css是自上而下的。 ####

我的代码如下：  
reactjs中的部分代码

construction(props){
        super(props);
        this.state={
            hover: false,
        }
        this.onMouseEnter = this.onMouseEnter.bind(this);
        this.onMouseLeave = this.onMouseLeave.bind(this);
    }
    
    onMouseEnter(){
        this.setState({
            hover: true,
        });
    }
    
    onMouseLeave(){
        this.setState({
            hover: false,
        })
    }
    
    render(){
        return <div>
                    <div className={style.a + ' ' + style.abc + ' ' + (this.state.hover?style.aHover:'')}>a</div>
                    <div className={style.b + ' ' + style.abc + ' ' + (this.state.hover?style.bHover:'')}>b</div>
                    <div className={style.c + ' ' + style.abc + ' ' + (this.state.hover?style.b=cHover:'')}>c</div>
                </div>;
    }

css的相关样式

.abc{
        //公共的样式
        color: red;
    }
    
    .a{
    }
    
    .b{
    }
    
    .c{
    }
    //写在其他class的样式表的下面
    .aHover,.bHover,.cHover{
        color: green;
    }
    
    .aHover:hover,.bHover:hover,.cHover:hover{
        color: red;
    }

也许有的人会想到用css中的+选择器，比如：.abc:hover + .abc\{\}，是的，如果只是像这里写的需求的话是可以实现，如果换一下，我鼠标放在b上，b显示红色，其他显示绿色，那么+选择器就无力了，因为css是自上而下，不可逆的，说是+是兄弟级选择器，我看也就是弟弟级选择器，它只能定位到你当前标签后面同级的标签元素。

*注：因为是react，所以不建议使用js对dom进行直接操作、利用css的expression*