单击单元格内的图标时，Ag-Grid Prevent onRowClicked事件

Question

我有一个单元格渲染器，该渲染器返回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事件将导航到新页面。

Answer 1

请参阅this answer以获得更深入的解释，但是要点是，您从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>
  );
}

实时演示