react 为自定义列表增加鼠标悬停变色效果

思路：使用鼠标移动相关的函数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;