Триггерная ячейка onClick вместо строки onClick в React Table

Question

У меня есть следующая таблица:

Я хочу, чтобы щелчок по трем точкам с правой стороны строки открыл всплывающее меню, поэтому я написал функцию onClick для этой ячейки.

Я также хочу, чтобы нажатие на любую другую область в строке перенаправляло на другую страницу, поэтому я переопределяю onClick таблицы реагирования (как предлагается в документации по таблице реагирования: https://github.com/tannerlinsley/react-table/tree/v6#custom-props) следующим образом:

 _getTdProps = (state, rowInfo, column, instance) => ({
     onClick: (e, handleOriginal) => {
        if (this.props.onTableRowClick) {
            this.props.onTableRowClick({ e, column, rowInfo, instance });
        }
        if (this.props.shouldHandleOriginalOnClick && handleOriginal) {
           handleOriginal();
        }
    },
})

Моя проблема в том, что перенаправление на другую страницу происходит также при нажатии значка из трех точек вместо открытия всплывающего меню.

Как я могу заставить эту функцию работать? Я пытался играть с z-index для ячейки и строки, но это не помогло.

Есть предложения?

Спасибо

Answer 1

Вы можете вызвать метод stopPropagation для события щелчка точек, чтобы при щелчке точек событие не всплыло до строки.

e.stopPropagation();

Answer 2

Вы можете попробовать это:

handleKeyDown(event) {
  event.preventDefault(); // Let's stop this event.
  event.stopPropagation(); // This will work.
}