当单击来自 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
}