时间戳

首页 > 解决方案 > 反应虚拟化表更改选定的行颜色

react-virtualized - 反应虚拟化表更改选定的行颜色

问题描述

我是对虚拟化概念做出反应的新手，并且正在使用装饰有 Autosizer 的 RV 表来显示我列表中的内容。目前，当我选择一行时，我会向 react-redux 发送一个操作，以根据所选行数据更新 store 中的状态。这似乎有效。我还想添加“已选择行”的视觉提示，例如背景颜色或文本颜色，但我无法实现。

我尝试使用 rowRenderer 函数来设置样式，但它似乎不起作用。有人可以分享一个简单的示例，说明如何更改 RV 表上的选定行吗？当我选择一次时，我希望更改颜色并重新选择同一行应该撤消颜色背景。

标签： react-virtualized

解决方案

下面是突出显示选择行的工作示例。要取消选择突出显示的行，您可以调整 rowStyleFormat 函数中的逻辑

import React from 'react'
import { Column, Table } from "react-virtualized";
import "react-virtualized/styles.css";

class TestTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: -1,
      data: [
        { 'rank': 1, 'player': 'Michael Jordan', 'points': 30 },
        { 'rank': 2, 'player': 'Wilt Chamberlain', 'points': 30 },
        { 'rank': 3, 'player': 'Bill Russell', 'points': 15 },
      ]
    }
  }

  handleRowSelect(event) {
    this.setState(
      {
        index: event.index
      }
    )
  }

  rowStyleFormat(row) {
    if (row.index < 0) return;
    if (this.state.index === row.index) {
      return {
        backgroundColor: '#b7b9bd',
        color: '#333'
      };
    }
    return {
      backgroundColor: '#fff',
      color: '#333'
    };
  }

  render() {
    return (
      <Table width={500} height={300} headerHeight={20} rowHeight={30}
        rowCount={this.state.data.length} rowGetter={({ index }) => this.state.data[index]}
        onRowClick={this.handleRowSelect.bind(this)} 
        rowStyle={this.rowStyleFormat.bind(this)}
        >
        <Column width={100} label='Rank' dataKey='rank' />
        <Column width={150} label='Player' dataKey='player' />
        <Column width={150} label='Points' dataKey='points' />
      </Table>
    );
  }
}

export default TestTable;

推荐阅读