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

Question

我有一个单元格渲染器，它返回行上的名称属性和对象：

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

事件将导航到新页面。

Answer 1

请参阅这个答案以获取更深入的解释，但要点是，您从

event

回调收到的

onClick

是 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>
  );
}

现场演示

Answer 2

还有一个解决方法

preventDefault()

在单元格内你可能有这样的代码：

<div
  onClick={(e) => e.preventDefault()}
>
 <Button />
</div>

并使用原始处理程序：

<AgGrid 
  onRowClicked={(row) => {
    if(row.event.defaultPrevented) {
      return null
    }

    doSomethingHere()
  }}
/>

Answer 3

您收到的事件是 Ract 合成事件，但您可以使用它来访问本机事件。

    <IconButton
        icon="menu"
        onClick={({ event }) => {          
            event.nativeEvent.stopPropagation();
            // Your logic goes here 👇
            onMenuClick();
         }}
    />