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

Пользователь

от autumn_parker , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от brenna , год назад

@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", что позволяет выделить его стилями.

Пользователь

от carlo.cummerata , 5 месяцев назад

@autumn_parker 

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