react做一个框选功能,被框选的元素获得该元素内容
时间: 2024-04-24 17:22:28 浏览: 22
好的,您可以参考下面的代码实现:
```jsx
import React, { useState, useRef } from "react";
function SelectableBox({ children }) {
const [isSelected, setIsSelected] = useState(false);
const [selectedContent, setSelectedContent] = useState("");
const [startX, setStartX] = useState(0);
const [startY, setStartY] = useState(0);
const [endX, setEndX] = useState(0);
const [endY, setEndY] = useState(0);
const ref = useRef(null);
const handleMouseDown = (event) => {
setIsSelected(true);
setStartX(event.clientX);
setStartY(event.clientY);
};
const handleMouseMove = (event) => {
if (isSelected) {
setEndX(event.clientX);
setEndY(event.clientY);
const rect = ref.current.getBoundingClientRect();
const left = Math.min(startX, endX) - rect.left;
const top = Math.min(startY, endY) - rect.top;
const width = Math.abs(endX - startX);
const height = Math.abs(endY - startY);
const selectedElements = Array.from(ref.current.children).filter((child) => {
const childRect = child.getBoundingClientRect();
return (
childRect.left + childRect.width >= left &&
childRect.top + childRect.height >= top &&
childRect.left <= left + width &&
childRect.top <= top + height
);
});
setSelectedContent(selectedElements.map((el) => el.textContent).join(""));
}
};
const handleMouseUp = () => {
setIsSelected(false);
};
return (
<div
ref={ref}
onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp}
>
{children}
{isSelected && (
<div
style={{
position: "absolute",
left: Math.min(startX, endX),
top: Math.min(startY, endY),
width: Math.abs(endX - startX),
height: Math.abs(endY - startY),
backgroundColor: "rgba(0, 0, 255, 0.2)",
pointerEvents: "none",
}}
/>
)}
{selectedContent && (
<div
style={{
position: "fixed",
top: "10px",
right: "10px",
backgroundColor: "white",
padding: "10px",
border: "1px solid black",
}}
>
{selectedContent}
</div>
)}
</div>
);
}
```
使用方法:
```jsx
<SelectableBox>
<div>Apple</div>
<div>Banana</div>
<div>Cherry</div>
<div>Durian</div>
<div>Elderberry</div>
</SelectableBox>
```
效果如下图所示:
![react-selectable-box-demo](https://i.imgur.com/1Nb5tvc.gif)
当您框选其中的元素时,被框选的元素的内容会显示在右上角。
相关推荐
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)