如何在 react-table 中为单行设置 2 个不同的事件

Question

我正在使用 React table v6，我在每一行中都有一个按钮，单击按钮我想执行一些操作，单击该行我需要执行一些其他操作。我正在使用 getTrProps() 组件装饰器在行上执行单击操作，但在使用此按钮后，单击按钮也被视为行单击，它正在执行行单击操作。

    <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

这是因为您的活动正在传播。

e.stopPropagation()

停止在按钮的点击功能内传播。

如何在 react-table 中为单行设置 2 个不同的事件

how to have 2 different events for a single row in react-table

javascript

reactjs

react-table