博客

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

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

<div class="a abc">a</div>
<div class="b abc">b</div>
<div class="c abc">c</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