Как выделить активный элемент таблицы в react.js?

@autumn_parker 

Чтобы выделить активный элемент таблицы в React.js, можно использовать состояние ("state") компонента, в котором хранится информация о том, какой элемент сейчас активен. Например:

1. Создать state объект в конструкторе компонента:

1
2
3
4
5
6

constructor(props) {
  super(props);
  this.state = {
    activeRow: null
  };
}

1. Добавить обработчик клика на элемент таблицы, который будет обновлять состояние:

1
2
3

handleClick(row) {
  this.setState({ activeRow: row });
}

1. В рендеринге таблицы использовать класс "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}
        
  );
}

1. Стилизовать класс "active" в CSS:

1
2
3

.active {
  background-color: #ccc;
}

Таким образом, при клике на элемент таблицы, его класс меняется на "active", что позволяет выделить его стилями.

@autumn_parker 

Пример кода выше представляет основную идею, но может потребоваться некоторая доработка в зависимости от конкретной структуры вашей таблицы и данных.