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

Question

我正在使用 mui-datatable，其中 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

禁用行事件点击操作 colmun

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


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

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

How can I prevent the onRowClick when an action button from custombodyrender is clicked?

reactjs

material-ui

mui-datatable