如何在反应表中为单行设置 2 个不同的事件

Question

I am using react table v6, I have a button in each row,on click of button I want to perform some operation and on click of row I need to perform some other operation. I am using getTrProps() component decorator to perform the on click operation on row but after using this the click on button is also considered as a row click and it is performing the operation of row click.

    <ReactTable
     data={rowData}
     sortable={true}
     showPagination={true}
     getTrProps={(state, rowInfo) => {
      if (rowInfo && rowInfo.row) {
        return {
          onClick: e => {
            setState(true);
            setData(rowData[rowInfo.index].shortName);
          }

        };
      } else {
        return {};
      }
    }}
    columns={[
      { Header: "Name", accessor: "displayName" },
      {
        Header: "",

        Cell: (
          <DeleteServiceModel
            btnName={"Delete"}
            comp={"product"}
            size="sm"
            data={""}
            {...props}
          />
        )
      }
    ]}
    defaultPageSize={5}
    className="-striped -highlight"
 />

Answer 1

This is because your event is getting propagated.

e.stopPropagation()

to stop the propagation inside the on Click function of your button.