如何限制對表行鼠標事件的多個添加和刪除類名

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; }