当前位置：首页 > React

react软件如何框选

2026-02-26 13:32:52React

框选功能实现方法

在React中实现框选功能通常涉及监听鼠标事件、计算选区范围以及渲染选框元素。以下是具体实现步骤：

react软件如何框选

监听鼠标事件

在目标容器上添加onMouseDown、onMouseMove和onMouseUp事件处理器。通过useState保存选框的起始坐标和当前坐标：

react软件如何框选

const [startPos, setStartPos] = useState(null);
const [currentPos, setCurrentPos] = useState(null);

const handleMouseDown = (e) => {
  setStartPos({ x: e.clientX, y: e.clientY });
  setCurrentPos({ x: e.clientX, y: e.clientY });
};

const handleMouseMove = (e) => {
  if (startPos) {
    setCurrentPos({ x: e.clientX, y: e.clientY });
  }
};

const handleMouseUp = () => {
  setStartPos(null);
  setCurrentPos(null);
};

渲染选框元素

根据坐标动态计算选框的样式并渲染一个绝对定位的div：

<div 
  style={{
    position: 'absolute',
    left: Math.min(startPos?.x, currentPos?.x),
    top: Math.min(startPos?.y, currentPos?.y),
    width: Math.abs(currentPos?.x - startPos?.x),
    height: Math.abs(currentPos?.y - startPos?.y),
    backgroundColor: 'rgba(0, 123, 255, 0.3)',
    border: '1px dashed #007BFF',
    display: startPos && currentPos ? 'block' : 'none',
  }}
/>

检测元素碰撞

通过比较目标元素位置与选框范围判断是否被选中：

const isElementInSelection = (elementRect, selectionRect) => {
  return !(
    selectionRect.right < elementRect.left ||
    selectionRect.left > elementRect.right ||
    selectionRect.bottom < elementRect.top ||
    selectionRect.top > elementRect.bottom
  );
};