思路：使用鼠标移动相关的函数
onMouseEnter()、onMouseLeave()获取并存储当前行id,再判断当前鼠标悬停处所在的行id是否等于之前存储的行id，等于就变色，不等于就取消变色。
-
效果如下
image.png 主要代码如下
class PromotersAgent extends PureComponent {
constructor(props) {
super(props);
this.state = {
idx: "",
listData:[]
}
}
render() {
return (
<Fragment>
<ul >
{this.getListFunc()}
</ul>
</Fragment>
)
}
handleMouseFunc = (currentId) => {
return () => {
this.setState({idx:currentId})
}
}
getListFunc() {
var dealMatchList = [];
this.state.listData.map((item, index) => {
var currentId = item.id;
dealMatchList.push(
<li
onMouseEnter={this.handleMouseFunc(currentId)}
onMouseLeave={this.handleMouseFunc(currentId)}
style={{ background: this.state.idx == currentId ? '#f5f7fa' : '' }}
>
xxxx
</li>);
});
return dealMatchList;
}
}
export default PromotersAgent;
