单击单元格内的图标时，Ag-Grid 防止 onRowClicked 事件答案

【问题标题】：Ag-Grid Prevent onRowClicked event when clicking icon inside cell单击单元格内的图标时，Ag-Grid 防止 onRowClicked 事件
【发布时间】：2021-01-05 21:53:48
【问题描述】：

我有一个单元格渲染器，它连续返回 name 属性和对象：

const nameRenderer = ({ value, data }) => {
    const { id: queueId } = data;
    return (
      <Box>
        <div className="row-hidden-menu">
            <IconButton
              icon="menu"
              onClick={({ event }) => {
                event.preventDefault();
                event.stopPropagation();
                onMenuClick();
              }}
            />
        </div>
      </Box>
    );
  };

我遇到的问题是我有一个onRowClick 函数，但我不希望在单击nameRenderer 中的图标时调用该函数。现在，当菜单打开时，onRowClicked 事件导航到一个新页面。

【问题讨论】：

prevent default 应该停止事件冒泡
@sandeepjoshi 你的假设是错误的。 stopPropagation() 将阻止事件冒泡，而preventDefault() 只会抑制事件的默认行为。问题中提供的代码方向正确，但由于 React 设计怪癖而无法正常工作。

标签： javascript reactjs ag-grid ag-grid-react

【解决方案1】：

请参阅this answer 以获得更深入的解释，但要点是您从onClick 回调收到的event 是React 的合成事件，它是本机事件的包装器。从合成事件中调用 stopPropagation() 不会阻止真实事件冒泡，这在很长一段时间内都是 React 框架的一个怪癖。

解决方案：将您的 onClick 事件处理程序附加到真实的 DOM 元素。

function ButtonCellRenderer() {
  return (
    <button
      ref={(ref) => {
        if (!ref) return;

        ref.onclick = (e) => {
          console.log("native event handler");
          e.stopPropagation(); // this works
          // put your logic here instead because e.stopPropagation() will
          // stop React's synthetic event
        };
      }}
      onClick={(e) => {
        e.stopPropagation(); // this doesn't work
      }}
    >
      Click me
    </button>
  );
}

现场演示

【讨论】：