React Virtualized Table изменяет выбранный цвет строки
Я новичок в реагировании на виртуализированные концепции и использую RV Table, украшенный Autosizer, для отображения содержимого из моего списка. В настоящее время, когда я выбираю строку, я отправляю действие на response-redux для обновления состояния в магазине на основе выбранных данных строки. Кажется, это работает. Я также хотел бы добавить визуальную подсказку о «выбранной строке», например, цвет фона или цвет текста, и мне не удалось этого добиться.
Я попытался использовать функцию rowRenderer для установки стиля, но, похоже, она не работает. Может ли кто-нибудь поделиться простым примером того, как я могу изменить выбранную строку в таблице RV? Когда я выбираю его один раз, я хочу, чтобы цвет изменился, и повторный выбор той же строки приведет к отмене цветового фона.
Ответы 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;
можете ли вы привести пример кода, который у вас не работает?