Изменить цвет строки таблицы React при двойном щелчке - PullRequest
Новая
       21

Изменить цвет строки таблицы React при двойном щелчке

0 голосов
/ 10 марта 2020

Я использую DataTable компонент из премьер-реакция в моем приложении React для создания таблицы данных. Я хочу изменить цвет строки, когда она дважды нажата. Однако при щелчке другой строки цвет предыдущей выделенной строки должен быть изменен на исходный. Я просмотрел документы, но прайм-реактив не предоставляет API для изменения цвета строк. Итак, что будет лучшим способом для достижения этого?

Я могу изменить цвет строки, как это, но я не вижу эффективного способа изменить цвета назад всех других строк. Кроме того, не рекомендуется использовать vanilla JavaScript для изменения DOM? 

  const highlightRow = event => {
    event.originalEvent.currentTarget.classList.add('highlighted-row');
  };

  <DataTable
     value={props.values}
     onRowDoubleClick={event => highlightRow(event)}
   >

CSS: 

.highlighted-row {
    background-color: blue;
}

Ответы [ 2 ]

0 голосов
/ 12 марта 2020

Я понял это. Я сохраняю последнюю нажатую строку в состоянии моего компонента. Затем, когда пользователь щелкает по другой строке, я сначала удаляю класс highlighted-row css из этой строки, а затем обновляю состояние компонента, добавляя новую строку в качестве текущей выделенной строки. Затем я добавляю класс highlighted-row в эту строку. 

const [, highlightComponent] = useState(null);

const highlightComponentOnRowClick = row => {
  const highlightedNode = row.originalEvent.currentTarget;
  highlightComponent(previousHighlight => {
    previousHighlight && previousHighlight.classList.remove("highlighted-row");
    highlightedNode && highlightedNode.classList.add("highlighted-row");
    return highlightedNode;
  });
  dispatch(setHighlightedComponent(row.data.component_id));
};
0 голосов
/ 10 марта 2020

Вы должны отслеживать строку, в которой дважды щелкнули в данный момент, используя состояние (https://reactjs.org/docs/state-and-lifecycle.html). Тогда вы, вероятно, можете использовать опору выбора в этом компоненте 

selection={this.state.selectedCar1} onSelectionChange={e => this.setState({selectedCar1: e.value})}

Проверить этот пример https://www.primefaces.org/primereact/showcase/# / DataTable / выбор

...