@autumn_parker
Чтобы выделить активный элемент таблицы в React.js, можно использовать состояние ("state") компонента, в котором хранится информация о том, какой элемент сейчас активен. Например:
- Создать state объект в конструкторе компонента:
1
2
3
4
5
6
|
constructor(props) {
super(props);
this.state = {
activeRow: null
};
}
|
- Добавить обработчик клика на элемент таблицы, который будет обновлять состояние:
1
2
3
|
handleClick(row) {
this.setState({ activeRow: row });
}
|
- В рендеринге таблицы использовать класс "active" для активного элемента:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
render() {
const { data } = this.props;
const { activeRow } = this.state;
return (
{data.map(row => (
this.handleClick(row)}
className={row === activeRow ? "active" : null}
>
))}
{row.id}
{row.name}
{row.value}
);
}
|
- Стилизовать класс "active" в CSS:
1
2
3
|
.active {
background-color: #ccc;
}
|
Таким образом, при клике на элемент таблицы, его класс меняется на "active", что позволяет выделить его стилями.