Обрабатывать событие нажатия, когда кнопка внутри ячейки нажата

Question

У меня есть DataTable как это:

render() {
    return(
      <div>
        <DataTable value={this.props.members} header="Members"
          selectionMode="single" onSelectionChange={this.onMemberSelected} 
        >
          <Column field='name' header='Name' sortable />
          <Column field='lastName' header='Last Name' sortable />
          <Column field='address' header='Address' sortable />
          <Column field='country' header='Country' sortable />
          <Column body={ (member, _) => {
            return this.renderDeleteButton(member);
          } }/>
        </DataTable>
      </div>
    );
}

renderDeleteButton(member) {
    return (
        <Button
            label="Delete"
            onClick={ e => { 
                //delete member
            }}
        />
    );
}

onMemberSelected(e) {
    //show member detail
}

Когда я нажимаю кнопку "Удалить", она отображает сведения об элементе, потому что строка обрабатывает событие и onMemberSelected называется.

Как я могу решить это?

Answer 1

Вы можете остановить распространение реагирующих синтетических событий с помощью stopPropagation(), Итак, в вашем обработчике события для кнопки удаления вы должны добавить его так:

handleDeleteButtonClick = event => {
    event.stopPropagation();

    // handle click
}