javascript - 如何在react-table中的一行中有2个不同的事件

我正在使用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"
 />

最佳答案

这是因为您的事件正在传播。

e.stopPropagation()

停止按钮的“单击”功能内的传播。