Как ограничить множественное добавление и удаление имен классов для событий таблицы мыши

Я использую реагирующую загрузочную таблицу для отображения моих данных. При использовании мыши для любой строки мне нужно динамически добавить две кнопки над последними двумя столбцами этой конкретной строки со свисающими окнами. Как на картинке выше.

Я добавил эту функциональность, добавив имена классов и innerHTML onRowMouseOver.

И удаление добавленного элемента innerHtml на основе добавленных ClassNames onRowMouseOut.

Я могу добавить две кнопки на навесном ряду. Но когда я парю над добавленными кнопками, он постоянно мигает.

Вот пример кода:

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 Demo: Моя демо- версия Codesandbox Ссылка: https://codesandbox.io/s/p910j5k6x

Источник

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

Источник

Я думаю, что кнопки, которые вы добавляете, не позволяют событию мыши оставаться над строкой.

Когда ваша мышь находится над строкой, она добавит div с кнопками в DOM, перекрывая строку. Это блокирует вашу мышь от запуска событий в элементе строки. Поскольку ваша мышь технически покинула элемент строки, она снова удалит кнопки.

Я думаю, что вам лучше всего добавить div с кнопками к самому элементу строки.

Источник
Другие вопросы по тегам