javascript - 使用react js隐藏行的特定元素

Question

我有一个 div 元素数组，如下所示:-

var accdata = [];
for(var i = 0;i < returndata1.length;++i){
accdata.push(
<div className="data-main" onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>
    <span className="data-child">{returndata1[i].Project}</span>
    <span className={this.state.cls}>
        <span className="flag"></span>
        <span className="share"></span>
        <span className="star"></span>                  
    </span>
</div>
);
}

//toggle function
toggleHover(){
    this.setState({hover: !this.state.hover})
    if(this.state.hover === true){
        this.setState({cls: 'icon-display'})
    }
    else{
        this.setState({cls: ''})
    }
}

但是当鼠标悬停时，所有分区的跨度元素都会消失。如果我们将鼠标悬停在特定行上，则如何设置只有该行的 span 元素消失？

Answer 1

实现这一点的最简单方法是使用 css。下面是使用一些通用 css 类的示例: http://jsfiddle.net/9utga8ya/2/

react :

var accdata = [];
for(var i = 0;i < returndata1.length;++i){
    accdata.push(
        <div className="data-main">
            <span className="data-child">{returndata1[i].Project}</span>
            <span className="icon-display">
                <span className="flag"></span>
                <span className="share"></span>
                <span className="star"></span>                  
            </span>
        </div>
    );
}

CSS:

.data-main .icon-display {
    display: inline;
}

.data-main:hover .icon-display {
    display: none;
}