问题描述
想实现百度网盘淘宝那种带着黏贴进去会自动获取内容，然后进行后续业务操作。
实践
- 通过监听事件粘贴事件（不能满足需求）
window.addEventListener("paste", function (e){
if ( !(e.clipboardData && e.clipboardData.items) ) {
return;
}
});
- 通过 navigator.clipboard 实现（兼容不好）
实现代码
jsx
import React from 'react';
import './index.css';
import { useState, useRef } from 'react';
import { useEffect } from 'react';
function ClipBoard(prop) {
const [textArr, setTextArr] = useState([])
const ref = useRef(false)
function bindCopy(text) {
console.log(text);
const theClipboard = navigator.clipboard;
if (theClipboard) {
theClipboard.writeText(text).then((e) => {
console.log(`复制${text}成功`);
}, (err) => {
console.log(err);
})
}
}
useEffect(()=>{
if (ref.current) {
ref.current.onclick = function bindWinClick() {
const theClipboard = navigator.clipboard;
if (theClipboard) {
theClipboard.readText().then((e) => {
console.log(`粘贴${e}成功`);
setTextArr(pre => {
return [...pre, e]
})
}, (err) => {
console.log(err);
})
}
}
}
})
return (
<div className="clip-board_wrapper">
<div className='clip-board_oriage-wrapper'>
{
new Array(10).fill(parseInt(111)).map((item, index) => {
return (
<div className='clip-board_item-wrapper' key={index}>
<div>{item}</div>
<div onClick={() => bindCopy(item)}>复制</div>
</div>
)
})
}
</div>
<div className='clip-board_oriage-wrapper' ref={ref} >
{
textArr.map((item, index) => {
return (
<div className='clip-board_item-wrapper' key={index}>
<div>{item}</div>
</div>
)
})
}
</div>
</div>
);
}
export default ClipBoard;
css
.clip-board_wrapper {
width: 500px;
height: 600px;
border: 1px solid red;
display: flex;
flex-direction: column;
}
.clip-board_oriage-wrapper {
border: 1px solid khaki;
display: flex;
flex-wrap: wrap;
}
.clip-board_item-wrapper {
padding: 20px;
height: 30px;
display: flex;
border: 1px solid aqua;
justify-content: flex-start;
align-items: center;
}
.clip-board_oriage-wrapper {
height: 300px;
border: 1px solid seagreen;
}
app.jsx
function App() {
return (
<div className="App">
<ClipBoard
>
</ClipBoard>
</div>
);
}
实现效果图
