React Grid Layout父容器空白点击事件失效解决方案咨询

需求：在嵌套的react-grid-layout中，点击父<GridLayout>的空白区域（非其子项）时，将active布局设置为1；点击子项时不修改该状态。当前尝试通过坐标判断点击是否命中子元素，但onClick事件无法正常工作，希望实现类似点击外部的效果。

原尝试代码 #

import "./styles.css";
import GridLayout from "react-grid-layout";
import { useState, useRef } from "react";
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";

export default function CustomLayout({ layout, onDragStart, onDragStop }) {
  const [isDraggable, setIsDraggable] = useState(true);
  const [active, setActive] = useState(2);
  const gridLayoutRef = useRef(null);

  console.log("state", active);

  const handleClick = (event) => {
    const x = event.nativeEvent.offsetX;
    const y = event.nativeEvent.offsetY;
    const layout = gridLayoutRef.current.state.layout;

    for (let i = 0; i < layout.length; i++) {
      const item = layout[i];
      if (
        x >= item.x &&
        x <= item.x + item.w &&
        y >= item.y &&
        y <= item.y + item.h
      ) {
        setActive(2);
        return;
      }
    }

    setActive(1);
  };

  return (
    <GridLayout
      className="layout"
      onDragStart={onDragStart}
      onDragStop={onDragStop}
      layout={layout}
      cols={12}
      rowHeight={80}
      width={1200}
      isDraggable={isDraggable}
      ref={gridLayoutRef}
    >
      {layout.map((item) => {
        if (item.children) {
          return (
            <div
              key={item.i}
              style={{ background: "pink", border: "1px solid black" }}
            >
              <CustomLayout
                layout={item.children}
                onDragStart={() => {
                  setIsDraggable(false);
                }}
                onDragStop={() => {
                  setIsDraggable(true);
                }}
              />
            </div>
          );
        } else {
          return (
            <div key={item.i} style={{ background: "purple", color: "#fff" }}>
              {item.i}
            </div>
          );
        }
      })}
    </GridLayout>
  );
}

问题分析 #

1. 未绑定onClick事件：原代码中没有给<GridLayout>组件绑定handleClick函数，导致点击事件根本不会触发
2. 坐标逻辑错误：布局项的x/y/w/h是网格的逻辑坐标（列数/行数单位），而offsetX/offsetY是像素坐标，两者无法直接对比判断点击命中
3. 事件冒泡干扰：嵌套布局中，子元素的点击会冒泡到父布局，导致父布局的点击逻辑被误触发

解决方案 #

修改要点 #

• 给<GridLayout>绑定onClick事件
• 在所有子元素（包括子布局容器）上添加事件阻止冒泡，避免子元素点击触发父布局逻辑
• 通过事件目标直接判断是否点击了父布局的空白区域，无需坐标计算

修改后的完整代码 #

import "./styles.css";
import GridLayout from "react-grid-layout";
import { useState, useRef } from "react";
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";

export default function CustomLayout({ layout, onDragStart, onDragStop }) {
  const [isDraggable, setIsDraggable] = useState(true);
  const [active, setActive] = useState(2);
  const gridLayoutRef = useRef(null);

  console.log("state", active);

  const handleParentClick = () => {
    // 点击父布局空白区域时设置active为1
    setActive(1);
  };

  return (
    <GridLayout
      className="layout"
      onDragStart={onDragStart}
      onDragStop={onDragStop}
      layout={layout}
      cols={12}
      rowHeight={80}
      width={1200}
      isDraggable={isDraggable}
      ref={gridLayoutRef}
      onClick={handleParentClick}
    >
      {layout.map((item) => {
        if (item.children) {
          return (
            <div
              key={item.i}
              style={{ background: "pink", border: "1px solid black" }}
              onClick={(e) => e.stopPropagation()}
            >
              <CustomLayout
                layout={item.children}
                onDragStart={() => {
                  setIsDraggable(false);
                }}
                onDragStop={() => {
                  setIsDraggable(true);
                }}
              />
            </div>
          );
        } else {
          return (
            <div
              key={item.i}
              style={{ background: "purple", color: "#fff" }}
              onClick={(e) => e.stopPropagation()}
            >
              {item.i}
            </div>
          );
        }
      })}
    </GridLayout>
  );
}

额外说明 #

如果需要区分点击的是子布局还是普通子项，可以在子元素的onClick中添加对应逻辑，比如点击子布局时设置active为2，只需要在子布局容器的onClick中添加：

onClick={(e) => {
  e.stopPropagation();
  setActive(2);
}}

内容的提问来源于stack exchange，提问作者Listopad02