React 表格行点击事件

Posted zhanglanzuopin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React 表格行点击事件相关的知识,希望对你有一定的参考价值。

        <Table
          dataSource={this.dataSources}
          columns={this.columns}
          onRow={(record) => {//表格行点击事件
            return {
              // onClick: this.clickRow.bind(this,record),
              onMouseEnter: this.clickRows.bind(this,record),
              onMouseLeave: this.clickRowss.bind(this,record)
            };
          }}
          onHeaderRow={(column, index) => {//表格行点击事件
            return {
              // onClick: this.clickRow.bind(this,record),
              onMouseEnter: this.clickRowsss.bind(this,column, index),
              onMouseLeave: this.clickRowssss.bind(this,column, index)

            };
          }}
          // bordered
          pagination={{
            // current: 1,
            current: this.state.pages, //当前页数     改变这个 就在改变页
            defaultCurrent: 1, //默认的当前页数
            pageSize: 20,
            // defaultPageSize: 1,
            onChange: this.onchange.bind(this),
            hideOnSinglePage: true
          }}
          // style = { display = this.state.cloudSource }
          className="cloudSourceAudit tablessa"
        />
  // ---------------------------------------------------------------------
  clickRows(record){
    document.getElementsByClassName(‘ant-table-row-level-0‘)[record[‘key‘]-1].style.background = ‘#516563‘;
    // document.getElementsByClassName(‘ant-table-thead‘)[0].style.background = ‘#516563‘;
  }
  clickRowss(record){
    document.getElementsByClassName(‘ant-table-row-level-0‘)[record[‘key‘]-1].style.background = ‘transparent‘;
    // document.getElementsByClassName(‘ant-table-thead‘)[0].style.background = ‘transparent‘;
  }
  clickRowsss(record,index){            //头部
    document.getElementsByClassName(‘ant-table-thead‘)[0].style.background = ‘#516563‘;
    document.getElementsByClassName(‘ant-table-thead‘)[1].style.background = ‘#516563‘;

  }
  clickRowssss(record,index){
    document.getElementsByClassName(‘ant-table-thead‘)[0].style.background = ‘transparent‘;
    document.getElementsByClassName(‘ant-table-thead‘)[1].style.background = ‘transparent‘;
  }

  clickRowsssss(record,index){
    // console.log("我是5",record,index,$(‘#tableId‘))
    // document.getElementsByClassName(‘ant-table-row-level-0‘)[0].style.background = ‘red‘;
    // document.getElementsByClassName(‘ant-table-row-level-0‘)[1].style.background = ‘red‘;
    
    for(var i=0; i<document.getElementsByClassName(‘ant-table-row-level-0‘).length; i++){
      document.getElementsByClassName(‘ant-table-row-level-0‘)[i].style.background = ‘transparent‘;
    }
    
    document.getElementsByClassName(‘ant-table-row-level-0‘)[record[‘key‘]-1].style.background = ‘#516563‘;

    // console.log(document.getElementsByClassName(‘ant-table-row-level-0‘),"测试",$(‘.ant-table-row-level-0‘)[record[‘key‘]-1])
    // this.setState({
    //   rowId: record.key,
    // });
    // $(‘.ant-table-row-level-0‘)[record[‘key‘]-1].siblings().style.background = ‘red‘;
  }


  

以上是关于React 表格行点击事件的主要内容,如果未能解决你的问题,请参考以下文章

React - 在表格行上触发点击事件并在另一个页面中显示所选行的详细信息

如何在反应js中获取表格行中的点击事件

miniui 给表格行添加监听事件的几种方法以及点击某列列名数据不能排序的问题

Element-ui 之 解决可编辑表格点击行操作或者选择日期选择器(统归为可编辑单元格)仍触发行点击事件的问题

Reactreact概述组件事件

如何向 v-data-table 添加点击事件?