按下單元格內部的按鈕時處理單擊事件

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
}