Question

我是新手来对虚拟化概念作出反应，并使用装饰有Autosizer的RV表来显示我的列表中的内容。目前，当我选择一行时，我会根据所选行数据向react-redux发送一个动作以更新存储状态。这似乎有效。我还想添加一个＆＃34;行选择的视觉提示＆＃34;像背景颜色或文字颜色，我无法实现这一点。

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

Answer 1

下面是突出显示所选内容行的工作示例。要取消选择突出显示的行，可以在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;

React Virtualized Table更改选定的行颜色

1 个答案: