按下单元格内的按钮时处理单击事件

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
}

当我按下 "Delete" 按钮时，它会显示成员详细信息，因为该行正在处理事件并且调用了 onMemberSelected。

我该如何解决这个问题？

Answer 1

您可以使用 stopPropagation() 停止对 React 合成事件的传播。因此，在删除按钮的事件处理程序中，您必须像这样添加它：

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

    // handle click
}

按下单元格内的按钮时处理单击事件

Handle click event when button inside cell is pressed

reactjs

primereact