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

Question

我正在使用react-bootstrap-table来显示我的data.在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:"[email protected]",
    phone:"9856325632",
    submitted:"10/02/18",
    responded:"01/09/18",
    status:"active"
  }, {
    id: 2,
    name: "abcdef",
    price: 120,
    email:"[email protected]",
    phone:"9856325632",
    submitted:"10/02/18",
    responded:"01/09/18",
    status:"active"
  },
  {
    id: 3,
    name: "abcdef",
    price: 120,
    email:"[email protected]",
    phone:"9856325632",
    submitted:"10/02/18",
    responded:"01/09/18",
    status:"active"
  },
  {
    id: 4,
    name: "abcdef",
    price: 120,
    email:"[email protected]",
    phone:"9856325632",
    submitted:"10/02/18",
    responded:"01/09/18",
    status:"active"
  },

  {
    id: 5,
    name: "abcdef",
    price: 120,
    email:"[email protected]",
    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 Codesandbox链接：https://codesandbox.io/s/p910j5k6x

Answer 1

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

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

我认为你最好的选择是将带按钮的div添加到row元素本身。

Answer 2

我使用以下代码修复它：

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

  {
    id: 5,
    name: "abcdef",
    price: 120,
    email: "[email protected]",
    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>
    );
  }

  helloww() {
    alert("heyyy its working");
  }
  render() {
    const options = {
      page: this.state.page,
      onRowMouseOut: function(row, e) {
        let ind = row.id - 1;
        let element = document.querySelectorAll("tbody")[0].children[ind];
        const buttons = element.getElementsByClassName("position-child")[0];
        buttons.style.display = "none";
      },
      onRowMouseOver: function(row, e) {
        let ind = row.id - 1;
        let addClass = document.querySelectorAll("tbody")[0].children[ind];
        let buttons = addClass.getElementsByClassName("position-child")[0];
        buttons.style.display = "block";
      }
    };

    const priceFormatter = (cell, row) => {
      return (
        <Fragment>
          {row.status}
          <div className="position-child">
            <div class="row " onmouseenter="mouseEnter()">
              <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"
                  onClick={e => this.helloww()}
                >
                  Delete User
                </button>
              </div>
            </div>
          </div>
        </Fragment>
      );
    };

    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} width="20%">
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField="name" width="20%">
            NAME
          </TableHeaderColumn>
          <TableHeaderColumn dataField="email" width="20%">
            EMAIL
          </TableHeaderColumn>
          <TableHeaderColumn dataField="phone" width="20%">
            PHONE
          </TableHeaderColumn>
          <TableHeaderColumn dataField="submitted" width="20%">
            LOGIN
          </TableHeaderColumn>
          <TableHeaderColumn dataField="responded" width="20%">
            SIGNUP
          </TableHeaderColumn>
          <TableHeaderColumn
            dataField="status"
            dataFormat={priceFormatter}
            width="20%"
          >
            STATUS
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

export default Tables;

.position-child {
    width: 25%;
    position: absolute;
    right: 131px;
    background: red;
    margin-top: -30px;
    display: none;
  }