реагировать на конфликт кнопки таблицы начальной загрузки с нажатием строки

Я начал работать с React и всеми портированными библиотеками, которые есть в начальной загрузке, и с пользовательскими.

В настоящее время у меня возникла проблема с таблицей начальной загрузки: я определил, что, когда пользователь нажимает на строку, отображается панель для редактирования этой строки, но у меня также есть кнопка в одном из столбцов строк, поэтому, когда я нажимаю Кнопка нажата, но затем запускается событие onRowClick, и я не хочу, чтобы это произошло, я пробовал много разных способов, но не мог заставить его работать, вы знаете, как?

Это таблица:

<BootstrapTable 
                data = { this.props.data }
                striped = { true }
                hover = { true }
                search = { true }
                options = {{ onRowClick: this.props.onUserEdit } } >

                <TableHeaderColumn 
                    dataField = "id"
                    isKey = { true }
                    dataSort = { true }
                    hidden = { true }> ID 
                </TableHeaderColumn> 

                <TableHeaderColumn 
                    dataField = "email"         
                    dataAlign="center"
                    dataSort = { true }> Email 
                </TableHeaderColumn> 

                <TableHeaderColumn 
                    dataField = "name"
                    dataAlign="center"
                    dataSort = { true }> User Name 
                </TableHeaderColumn> 

                <TableHeaderColumn 
                    dataField = "info"
                    dataAlign="center"
                    dataSort = { true }> Study, Site ID, Role 
                </TableHeaderColumn> 

                <TableHeaderColumn 
                    dataField = "lastlogin"
                    dataAlign="center"
                    dataSort = { true }
                    dataFormat={this.buttonFormatter}> Last Login 
                </TableHeaderColumn> 
</BootstrapTable>

Вот как я визуализирую кнопку в ячейке (this.echo - это просто отладочное предупреждение):

buttonFormatter: function(cell, row, formatExtraData, rowIdx) {
    return (<Button onClick={ this.echo } className="grid-button">{cell}</Button>);
},

Проблема в том, что при наведении курсора на кнопку строка остается такой же, как при наведении курсора.


reactjs react-bootstrap react-bootstrap-table
person Juan De Croche    schedule 23.09.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы пробовали остановить распространение события в кнопке обратного вызова onClick?

echo(e) {
  e.preventDefault();
  console.log("echo");
},
person kulesa    schedule 23.09.2016
comment
Я считаю, что это должно быть e.stopPropagation(), поскольку вы также упомянули в своем ответе над фрагментом кода. - person Yangshun Tay; 24.09.2016
comment
Я изменил свой поток, теперь у меня есть столбец с действиями и кнопка там, чтобы делать то, что я делал ранее, с помощью щелчка по строке, в любом случае, я попробую ваш ответ и дам отзыв, спасибо! - person Juan De Croche; 26.09.2016