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

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演示： 我的演示 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: "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> ); } 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; }