当前位置：首页 > React

react软件如何框选

2026-03-31 06:51:10React

在React中实现框选功能

使用鼠标事件监听

通过监听鼠标的mousedown、mousemove和mouseup事件来实现框选功能。在mousedown时记录起始坐标，在mousemove时计算当前框选区域并更新UI，在mouseup时完成框选操作。

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

function SelectionBox() {
  const [startPos, setStartPos] = useState({ x: 0, y: 0 });
  const [currentPos, setCurrentPos] = useState({ x: 0, y: 0 });
  const [isSelecting, setIsSelecting] = useState(false);
  const containerRef = useRef(null);

  const handleMouseDown = (e) => {
    const rect = containerRef.current.getBoundingClientRect();
    setStartPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
    setCurrentPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
    setIsSelecting(true);
  };

  const handleMouseMove = (e) => {
    if (!isSelecting) return;
    const rect = containerRef.current.getBoundingClientRect();
    setCurrentPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
  };

  const handleMouseUp = () => {
    setIsSelecting(false);
  };

  const getBoxStyle = () => {
    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, 0, 255, 0.2)',
      border: '1px solid blue',
    };
  };

  return (
    <div
      ref={containerRef}
      style={{ position: 'relative', width: '100%', height: '500px', border: '1px solid black' }}
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
    >
      {isSelecting && <div style={getBoxStyle()} />}
    </div>
  );
}

使用第三方库

对于更复杂的框选需求，可以使用第三方库如react-selectable-fast或react-drag-select。这些库提供了更完善的API和功能，如多选、选择回调等。

安装react-selectable-fast：

npm install react-selectable-fast

使用示例：

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

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

  const handleSelection = (selectedItems) => {
    setSelection(selectedItems.map(item => item.props.value));
  };

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

性能优化

对于大量可选项的场景，考虑使用虚拟滚动技术（如react-window）结合框选功能，避免渲染所有DOM节点带来的性能问题。

import { FixedSizeList as List } from 'react-window';
import { SelectableGroup } from 'react-selectable-fast';

const Row = ({ index, style }) => (
  <div style={style} className="selectable-item" value={index}>
    Item {index}
  </div>
);

function App() {
  return (
    <SelectableGroup>
      <List
        height={500}
        itemCount={1000}
        itemSize={35}
        width={300}
      >
        {Row}
      </List>
    </SelectableGroup>
  );
}