react实现获取复制粘贴过来的文件，文字。reactnative复制文字-蒲公英云

react实现获取复制粘贴过来的文件，文字。reactnative复制文字

获取复制的文件名

HTML

<div class="paste">
</div>
<input type="file" class="paste"/>
<textarea class="paste"></textarea>

JQuery

$('body').bind('paste', function(a, b, c) {
    console.log(a.originalEvent.clipboardData);
    console.log(a.originalEvent.clipboardData.getData('File'));
    console.log(a.originalEvent.clipboardData.getData('Text'));
    if (a.originalEvent.clipboardData.files[0]) console.log(a.originalEvent.clipboardData.files[0].getAsFile());
    if (a.originalEvent.clipboardData.items[0]) console.log(a.originalEvent.clipboardData.items[0].getAsFile());
    console.log(a, b, c);
}
);

此代码能够读取复制粘贴的文件名，注意哦，是文件名

获取复制的文字

copyTranslateResult = () => {

    const copyDOM = document.querySelector('.translateResult');
    if (copyDOM.innerHTML !== '') {
        var range = document.createRange(); //创建一个range
        window.getSelection().removeAllRanges(); //清楚页面中已有的selection
        range.selectNode(copyDOM); // 选中需要复制的节点
        window.getSelection().addRange(range); // 执行选中元素
        var successful = document.execCommand('copy'); // 执行 copy 操作
        if (successful) {
            message.success('复制成功！');
        } else {
            message.warning('复制失败，请手动复制！');
        }
        // 移除选中的元素
        window.getSelection().removeAllRanges();
    } else {
        message.warning('没有内容');
    }
};

通过组件获取复制的文字（如果页面中有多处复制，那么放到app.js的componentDidMount 组件内）

import * as ClipboardJS from ‘clipboard’
componentDidMount () {

    // 创建复制文字实例
    var clipboard = new ClipboardJS('#copytext');
    clipboard.on('success', function (e) {
        message.success('复制成功！');
        e.clearSelection();
    });
    clipboard.on('error', function (e) {
        message.warning('复制失败，请手动复制！');
    });
};

<div style={
   {backgroundColor:'#eeefff',height:60,padding:5}}>
                        <div>回复：<span id="replyFeedContent">{item.reply}</span></div>
                        <div style={
   {marginRight:10,cursor: 'pointer'}} data-clipboard-text={item.reply}>
                            <Icon type="copy" style={
   { color:'#666',fontSize: 13,marginRight: 5}} />
                            <span style={
   {color:'#666',fontSize: 13}}>复制</span>
                        </div>
                    </div>

reactnative复制文字

引入

import { Clipboard, } from 'react-native';
onCopy = (content) => {
         //清空粘贴板
         Clipboard.setString(null)
         //设置粘贴板文案
         Clipboard.setString(content)
         //获取粘贴板文案
         Clipboard.getString().then(oldVal => {
             if (oldVal == content) {
                toast("复制成功！");
             }
         })
    };