javascript - 如何限制在表行鼠标事件上添加和删除多个类名

Question

我正在使用 react-bootstrap-table用于显示我的数据。 在任何行的 mouseOver 上，我需要在该特定悬停行的最后两列上动态添加两个按钮。如上图。

我通过添加类名和 innerHTML onRowMouseOver 添加了该功能。

并根据添加的 ClassNames onRowMouseOut 删除添加的 innerHtml 元素。

我可以在悬停的行上添加两个按钮。但是当我将鼠标悬停在添加的按钮上时，它会不断闪烁。

这是代码示例:

import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
const products = [
  {
    id: 1,
    name: "abcdef",
    price: 120,
    email:"abc@gmail.com",
    phone:"9856325632",
    submitted:"10/02/18",
    responded:"01/09/18",
    status:"active"
  }, {
    id: 2,
    name: "abcdef",
    price: 120,
    email:"abc@gmail.com",
    phone:"9856325632",
    submitted:"10/02/18",
    responded:"01/09/18",
    status:"active"
  },
  {
    id: 3,
    name: "abcdef",
    price: 120,
    email:"abc@gmail.com",
    phone:"9856325632",
    submitted:"10/02/18",
    responded:"01/09/18",
    status:"active"
  },
  {
    id: 4,
    name: "abcdef",
    price: 120,
    email:"abc@gmail.com",
    phone:"9856325632",
    submitted:"10/02/18",
    responded:"01/09/18",
    status:"active"
  },

  {
    id: 5,
    name: "abcdef",
    price: 120,
    email:"abc@gmail.com",
    phone:"9856325632",
    submitted:"10/02/18",
    responded:"01/09/18",
    status:"active"
  },
];

const total = products.length;
class Tables extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
      selectedDate: null,
      page: 1,
      goToPageNum:1,
      disableGoButton:true,
      disableGoToInput:false,
      size:5,
    };
  }

  onSizePerPageList = (sizePerPage) => {
    this.setState({size:sizePerPage},()=> this.hideGTP());
  }

  expandComponent(row) {
    return (
      <div className="col-3">
        <div className="card bg-warning">
          <div className="card-body card-custom d-flex justify-content-around">
            <div className="card-text">
            <button type="button" class="btn btn-warning" onClick={()=>alert('hello!!!!!!')}>Change Status</button>
            </div>
            <div className="card-text d-flex align-items-center">
            Remove</div>
          </div>
        </div>
      </div>
    )
  }

  render() {
    const options = {
      page: this.state.page,
      onRowMouseOut: function(row, e) {

        let rmv = document.querySelector('.position-row');
        rmv.classList.remove('position-row')

        document.querySelector('.position-child').remove();
      },
      onRowMouseOver: function(row, e) {
        console.log('mouse enter from row ' + row.id);

        let ind = row.id-1;
        let addClass = document.querySelectorAll('tbody')[0].children[ind];
        addClass.classList.add('position-row');
        console.log('addClass',addClass);

        
        let spt = document.querySelector('.position-row');
        console.log('OVERRR',spt);

        var divv = document.createElement("div"); 
        divv.classList.add('position-child');

        divv.innerHTML = '<div class="row"><div class="col-6"><button type="button" class="btn btn-warning">Change Status</button></div><div class="col-6"><button type="button" class="btn btn-warning">Delete User</button></div></div>'
        
        spt.parentNode.insertBefore(divv, spt.nextSibling);
      }
    };
    return (
      <div className="container py-5">
        <BootstrapTable
          trClassName="table-row"
          bordered={false}
          ref='table'
          data={products}
          options={options}
          search={true}
        >
          <TableHeaderColumn dataField='id' isKey={true}>ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>NAME</TableHeaderColumn>
          <TableHeaderColumn dataField='email'>EMAIL</TableHeaderColumn>
          <TableHeaderColumn dataField='phone'>PHONE</TableHeaderColumn>
          <TableHeaderColumn dataField='submitted'>LOGIN</TableHeaderColumn>
          <TableHeaderColumn dataField='responded'>SIGNUP</TableHeaderColumn>
          <TableHeaderColumn dataField='status'>STATUS</TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

export default Tables;

我的问题是:闪烁:当我将鼠标悬停在添加的元素上时，它会不断闪烁(添加和删除类名和元素)。请指导我克服它。

Codedandbox 演示:My Demo 代码沙盒链接:https://codesandbox.io/s/p910j5k6x

Answer 1

我认为您添加的按钮会阻止鼠标事件停留在行上。

当您的鼠标悬停在该行上时，它会将带有按钮的 div 添加到 DOM，覆盖该行， 这会阻止您的鼠标触发行元素上的事件。 由于您的鼠标在技术上已经离开了行元素，因此它将再次删除按钮。

我认为最好的办法是将带有按钮的 div 添加到行元素本身。