stopPropagation 在组件层次结构中不起作用

Question

我试图避免在每个特定行上发生 onClick 事件，每当在一列数据下单击 show/less 时。我有一个基本上具有 select 和多个 select 功能的网格。其中一列也有 show more/show less 。每当我单击 Show More/Less 时，都会触发行 selection。我想避免这种情况。有人能告诉我这里出了什么问题吗？说如果有多个类似网格的实例，我希望行 select 功能到其中有 prop

的网格

沙盒：https://codesandbox.io/s/react-table-row-table-alternate-single-row-working-5fr81

 import * as React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

export default class DataGrid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRows: []
    };
  }

  rowClick = (state, rowInfo) => {
    if (rowInfo) {
      let selectedRows = new Set();
      return {
        onClick: e => {
          e.stopPropagation();
          if (e.ctrlKey) {
            selectedRows = this.state.selectedRows;
            rowInfo._index = rowInfo.index;
            if (
              selectedRows.filter(row => row._index === rowInfo._index)
                .length === 0
            )
              selectedRows.push(rowInfo);
            else
              selectedRows = selectedRows.filter(
                row => row._index !== rowInfo._index
              );
            this.setState({
              selectedRows
            });
          } else {
            selectedRows = [];
            rowInfo._index = rowInfo.index;
            selectedRows.push(rowInfo);
          }
          this.setState(
            {
              selectedRows
            },
            () => {
              console.log("final values", this.state.selectedRows);
              this.props.rowClicked(this.state.selectedRows);
            }
          );
        },
        style: {
          background:
            this.state.selectedRows.some(e => e._index === rowInfo.index) &&
            "#9bdfff"
        }
      };
    } else {
      return "";
    }
  };

  render() {
    return (
      <ReactTable
        data={this.props.data}
        columns={this.props.columns}
        getTrProps={this.rowClick}
      />
    );
  }
}

Answer 1

在您的 ShowMore 组件上，您可以修改 onClick 事件处理程序以调用 event.stopPropagation()。这将停止当前事件在捕获和冒泡阶段的进一步传播，并允许您单击 Show More/Less 而不会触发行选择。

const toggleTruncate = (e) => {
  e.stopPropagation();
  setShowMore(!isShowMore);
}

React 实际上定义了合成事件，它将在您的点击事件处理程序上可用，无需调用 document.addEventListener()。您可以通过 here.

阅读更多关于 React 中的事件处理的信息

回答问题的第二部分，鉴于 rowClicked 事件是 DataGrid 组件的可选道具，您需要在 DataGrid 上手动检查它组件以确保只有在定义时才会调用它。这是如何完成的：

if (rowClicked) {
 // do the rest
}

这就是您的 rowClick 方法的样子。请注意，我在第二行有 destructured 道具对象。这将确保只有在定义了 rowClicked 时才会执行行选择逻辑。

rowClick = (state, rowInfo) => {
  const { rowClicked } = this.props;
  if (rowInfo && rowClicked) {
    let selectedRows = new Set();
    return {
      onClick: e => {
        e.stopPropagation();
        if (e.ctrlKey) {
          selectedRows = this.state.selectedRows;
          rowInfo._index = rowInfo.index;
          if (
            selectedRows.filter(row => row._index === rowInfo._index)
              .length === 0
          )
            selectedRows.push(rowInfo);
          else
            selectedRows = selectedRows.filter(
              row => row._index !== rowInfo._index
            );
          this.setState({
            selectedRows
          });
        } else {
          selectedRows = [];
          rowInfo._index = rowInfo.index;
          selectedRows.push(rowInfo);
        }
        this.setState(
          {
            selectedRows
          },
          () => {
            rowClicked(this.state.selectedRows);                
          }
        );
      },
      style: {
        background:
          this.state.selectedRows.some(e => e._index === rowInfo.index) &&
          "#9bdfff"
      }
    };
  } else {
    return "";
  }
};

stopPropagation 在组件层次结构中不起作用

stopPropagation does not work in a hierarchy of components

javascript

dom-events

stoppropagation

reactjs

react-table