当来自custombodyrender的操作按钮被单击时，我如何防止onRowClick？

Question

我使用的是一个多重数据表，其中onRowClick会将用户定向到另一个页面。我也有自定义操作按钮在每一行。但是，如果我单击自定义操作按钮，它还会触发onRowClick，它会将用户定向到另一个页面。如何在单击自定义操作按钮时防止onRowClick？

class orders extends Component {
  constructor() {
    super();
    this.state = { orders: [] };
  }

  handleRowClick = (rowData, rowMeta) => {
    this.props.history.push("/details", `${rowData[0]}`);
  };

  columns = [
    "Order ID",
    "Items",
    "Address",
    "Total Amount",
    {
      name: "Action Button",
      options: {
        filter: true,
        sort: false,
        empty: true,
        customBodyRender: (value, tableMeta) => {
          return (
            <FormControlLabel
              value={value}
              control={
                <Button
                  value={value}                >
                  Action Button
                </Button>
              }
              onClick={(e) => {
                //firestore codes
              }}
            />
          );
        },
      },
    },
  ];
  options = {
    onRowClick: this.handleRowClick,
  };

  render() {
    return this.state.orders ? (
      <div>
        <MUIDataTable
          title={" Orders"}
          columns={this.columns}
          data={this.state.orders}
          options={this.options}
        />
        
      </div>
    ) : (
      <p>Loading...</p>
    );
  }
}
export default withRouter(orders);

Answer 1

假设你有一个按钮

<button onClick={onClick} >Don't Bubble</button>

您可以使用event.stopPropagation()来防止事件冒泡到父级。

const onClick=(event) => {
    event.stopPropagation()

    .. do what u want with the button
}

Answer 2

禁用操作列的行事件单击

  const handleActionColmunClick = (event: React.MouseEvent<HTMLElement>) => {
    event.stopPropagation();
  };


    <TableBodyCell onClick={handleActionColmunClick}>
                      <IconButton
                        aria-label="more"
                        aria-controls="customized-menu"
                        aria-haspopup="true"
                        onClick={handleActionMenuClick}
                      >
.....
...
..
.