当前位置：首页 > React

react软件如何框选

2026-01-23 23:36:59React

React 实现框选功能的方法

在React中实现框选（矩形选择）功能通常需要结合鼠标事件和动态样式。以下是几种常见实现方式：

使用原生DOM事件

通过监听鼠标事件计算选区范围并动态渲染选框：

react软件如何框选

import React, { useState, useRef } from 'react';

function SelectionBox() {
  const [startPos, setStartPos] = useState(null);
  const [currentPos, setCurrentPos] = useState(null);
  const containerRef = useRef(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);
  };

  const getBoxStyle = () => {
    if (!startPos || !currentPos) return { display: 'none' };

    const left = Math.min(startPos.x, currentPos.x);
    const top = Math.min(startPos.y, currentPos.y);
    const width = Math.abs(currentPos.x - startPos.x);
    const height = Math.abs(currentPos.y - startPos.y);

    return {
      position: 'absolute',
      left,
      top,
      width,
      height,
      backgroundColor: 'rgba(0, 120, 215, 0.3)',
      border: '1px solid rgba(0, 120, 215, 0.8)',
      zIndex: 9999
    };
  };

  return (
    <div
      ref={containerRef}
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      style={{ position: 'relative', height: '100vh' }}
    >
      <div style={getBoxStyle()} />
    </div>
  );
}

使用第三方库

对于更复杂的需求，可以使用专门的处理库：

react软件如何框选

react-selectable-fast：支持高性能的多选操作
interact.js：提供完整的拖拽和选择解决方案

import { SelectableGroup } from 'react-selectable-fast';

function SelectableList() {
  const handleSelection = (selectedItems) => {
    console.log(selectedItems);
  };

  return (
    <SelectableGroup onSelection={handleSelection}>
      {[...Array(20)].map((_, i) => (
        <div key={i} className="selectable-item">
          Item {i}
        </div>
      ))}
    </SelectableGroup>
  );
}

SVG实现方案

对于图形场景，使用SVG可能更合适：

function SvgSelection() {
  const [selection, setSelection] = useState(null);

  return (
    <svg
      onMouseDown={(e) => setSelection({ x1: e.clientX, y1: e.clientY })}
      onMouseMove={(e) => selection && setSelection({ ...selection, x2: e.clientX, y2: e.clientY })}
      onMouseUp={() => setSelection(null)}
    >
      {selection && (
        <rect
          x={Math.min(selection.x1, selection.x2)}
          y={Math.min(selection.y1, selection.y2)}
          width={Math.abs(selection.x2 - selection.x1)}
          height={Math.abs(selection.y2 - selection.y1)}
          fill="rgba(0,0,255,0.1)"
          stroke="blue"
        />
      )}
    </svg>
  );
}