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

【问题标题】：How can I prevent the onRowClick when an action button from custombodyrender is clicked?当单击来自 custombodyrender 的操作按钮时，如何防止 onRowClick？
【发布时间】：2021-08-06 10:46:40
【问题描述】：

我正在使用一个 mui 数据表，其中 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);

【问题讨论】：

也许您需要在您的操作按钮 onClick 回调中添加 event.stopPropagation()。

标签： reactjs material-ui mui-datatable

【解决方案1】：

假设你有一个按钮

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

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

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

    .. do what u want with the button
}

【讨论】：

【解决方案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}
                      >
.....
...
..
.

【讨论】：