如何在表格行鼠标事件上限制多个添加和删除类名 [英] How to restrict multiple adding and removing classnames on table row mouse-events

查看：49
本文介绍了如何在表格行鼠标事件上限制多个添加和删除类名的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用 在 mouseOver 任何一行上，我需要在该特定悬停行的最后两列上动态添加两个按钮.如上图.

我通过在 RowMouseOver 上添加类名和 innerHTML 来添加该功能.

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

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

这是代码示例:

import React, { Component } from 'react';导入 { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';const 产品 = [{编号:1，名称:abcdef"，价格:120，电子邮件:"abc@gmail.com",电话:"9856325632",提交:10/02/18"，回复:"01/09/18",状态:活动"}, {编号:2，名称:abcdef"，价格:120，电子邮件:"abc@gmail.com",电话:"9856325632",提交:10/02/18"，回复:"01/09/18",状态:活动"},{编号:3，名称:abcdef"，价格:120，电子邮件:"abc@gmail.com",电话:"9856325632",提交:10/02/18"，回复:"01/09/18",状态:活动"},{编号:4，名称:abcdef"，价格:120，电子邮件:"abc@gmail.com",电话:"9856325632",提交:10/02/18"，回复:"01/09/18",状态:活动"},{编号:5，名称:abcdef"，价格:120，电子邮件:"abc@gmail.com",电话:"9856325632",提交:10/02/18"，回复:"01/09/18",状态:活动"},];const total = products.length;类表扩展组件{构造函数(道具){超级(道具)；this.state = {文本: ''，选择日期:空，页数:1，goToPageNum:1,disableGoButton:true,disableGoToInput:false,尺寸:5，};}onSizePerPageList = (sizePerPage) =>{this.setState({size:sizePerPage},()=> this.hideGTP());}展开组件(行){返回 (<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!!!!!!')}>更改状态</button>

<div className="card-text d-flex align-items-center">删除

)}使成为() {常量选项 = {页面:this.state.page，onRowMouseOut:函数(行，e){让 rmv = document.querySelector('.position-row');rmv.classList.remove('位置-行')document.querySelector('.position-child').remove();},onRowMouseOver:函数(行，e){console.log('鼠标从行进入' + row.id);让 ind = row.id-1;让 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">更改状态</button>;</div><div class="col-6"><button type="button" class="btn btn-warning">删除用户</button></div></div>'spt.parentNode.insertBefore(divv, spt.nextSibling);}};返回 (<div className="容器 py-5"><引导表trClassName="表行"边框={假}ref='表'数据={产品}选项={选项}搜索={真}><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>

);}}导出默认表；

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

Codedandbox 演示:我的演示Codesandbox 链接:https://codesandbox.io/s/p910j5k6x

解决方案

我使用以下代码修复了它:

import React, { Fragment, Component } from "react";导入 { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";const 产品 = [{编号:1，名称:abcdef"，价格:120，电子邮件:abc@gmail.com"，电话:9856325632"，提交:10/02/18"，回复: "01/09/18",状态:活动"},{编号:2，名称:abcdef"，价格:120，电子邮件:abc@gmail.com"，电话:9856325632"，提交:10/02/18"，回复: "01/09/18",状态:活动"},{编号:3，名称:abcdef"，价格:120，电子邮件:abc@gmail.com"，电话:9856325632"，提交:10/02/18"，回复: "01/09/18",状态:活动"},{编号:4，名称:abcdef"，价格:120，电子邮件:abc@gmail.com"，电话:9856325632"，提交:10/02/18"，回复: "01/09/18",状态:活动"},{编号:5，名称:abcdef"，价格:120，电子邮件:abc@gmail.com"，电话:9856325632"，提交:10/02/18"，回复: "01/09/18",状态:活动"}];const total = products.length;类表扩展组件{构造函数(道具){超级(道具)；this.state = {文本: ""，选择日期:空，页数:1，goToPageNum: 1,disableGoButton: 真,disableGoToInput: 假，尺寸:5};}onSizePerPageList = sizePerPage =>{this.setState({ size: sizePerPage }, () => this.hideGTP());};展开组件(行){返回 (<div className="col-3"><div className="card bg-warning"><div className="card-body card-custom d-flex justify-content-around"><div className="card-text"><按钮类型=按钮"class="btn btn-警告"onClick={() =>警报(你好！！！！！！")}>更改状态

<div className="card-text d-flex align-items-center">移除</div>

);}你好(){警报(嘿嘿它的工作")；}使成为() {常量选项 = {页面:this.state.page，onRowMouseOut:函数(行，e){让 ind = row.id - 1;let element = document.querySelectorAll("tbody")[0].children[ind];const button = element.getElementsByClassName("position-child")[0];button.style.display = "无";},onRowMouseOver:函数(行，e){让 ind = row.id - 1;让 addClass = document.querySelectorAll("tbody")[0].children[ind];让按钮 = addClass.getElementsByClassName("position-child")[0];button.style.display = "block";}};const priceFormatter = (cell, row) =>{返回 (<片段>{row.status}<div className="position-child"><div class="row" onmouseenter="mouseEnter()"><div class="col-6"><button type="button" class="btn btn-warning">更改状态

<div class="col-6"><按钮类型=按钮"class="btn btn-警告"onClick={e =>this.helloww()}>删除用户

</片段>);};返回 (<div className="容器 py-5"><引导表trClassName="表行"边框={假}参考=表"数据={产品}选项={选项}搜索={真}><TableHeaderColumn dataField="id" isKey={true} width="20%">ID</TableHeaderColumn><TableHeaderColumn dataField="name" width="20%">名称</TableHeaderColumn><TableHeaderColumn dataField="email" width="20%">电子邮件</TableHeaderColumn><TableHeaderColumn dataField="phone" width="20%">电话</TableHeaderColumn><TableHeaderColumn dataField="submitted" width="20%">登录</TableHeaderColumn><TableHeaderColumn dataField="responseed" width="20%">报名</TableHeaderColumn><表头列数据字段=状态"数据格式={priceFormatter}宽度="20%">地位</TableHeaderColumn></BootstrapTable>

);}}导出默认表；

.position-child {宽度:25%；位置:绝对；右:131px；背景:红色；边距顶部:-30px；显示:无；}

I'm using On mouseOver any of the row, I need to dynamically add two buttons over the last two columns of that particular hovered row. As the above picture.

I've added that functionality by adding classnames and innerHTML onRowMouseOver.

And removing the added innerHtml element based on the added ClassNames onRowMouseOut.

I can add two buttons on hovered row. But when I hover on the added buttons it is flickering continuously.

Here is the code sample:

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;

My problem is: Flickering: when I hover on the added elements, it is continuously flickering(adding and removing the classnames and element). Please guide me to overcome it.

Codedandbox Demo: My Demo Codesandbox Link: https://codesandbox.io/s/p910j5k6x

解决方案

I fixed it by using the following code:

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

这篇关于如何在表格行鼠标事件上限制多个添加和删除类名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆