react: copy

copy text

使用说明：

1, 先引入CopyToClipboard
2, 点击CopyToClipboard组件会触发onCopy()方法, 然后自动copy text属性指向的变量值

demo如下：

import  { memo, useEffect, useState } from 'react'
import CopyToClipboard from 'react-copy-to-clipboard'

const Subject = memo(({item}:{item:jobItem}) => {
  const [subject,setSubject] = useState<string>('')
  const [subjectCopyColor,setSubjectCopyColor] = useState<string>('#FF8533')

  useEffect(()=>{
    setSubject(item?.subject[0])
  },[item])

  const copySubject = () =>{
	setSubjectCopyColor("#ccc")
    setTimeout(()=>{
      setSubjectCopyColor("#FF8533")
    },600)
  }

  
  return (
    <>
          <section>
            <div className="left">
              Subject:
            </div>
            <div className="mid">
              <input type='text' className='sub' value={subject} onChange={e=>setSubject(e.target.value)}
              />
            </div>
            <div className="right">
              <CopyToClipboard text={subject}
                onCopy={copySubject}>
                <span className='iconfont icon-copy' style={{color:subjectCopyColor}}></span>
              </CopyToClipboard>
            </div>
          </section>

    </>
  )
})

export default Subject

额外依赖：

"@types/react-copy-to-clipboard": "^5.0.7",

copy html

核心 util/util.tsx:

export function copyToClip(str:string|undefined) {  
    /* Get the text field */
    
    /* Alert the copied text */
    // alert("Copied the text: " + copyText.value);
    
    function listener(e:ClipboardEvent) {
      e.clipboardData?.setData("text/html", str!);
      e.clipboardData?.setData("text/plain", str!);
      e.preventDefault();
    } 
  
    document.addEventListener("copy", listener);
    document.execCommand("copy");
    document.removeEventListener("copy", listener);
};

demo如下：点击copy按钮会自动copy div里的html字符串

import React, { memo, useRef } from 'react'
import { Button } from 'antd'
import { copyToClip } from '../../../../utils/utils'

const Item = memo() => {
      //copy
      const emailContentRef = useRef<HTMLDivElement>(null)
	  return (
	    <>
	      <Button type='primary' size='small' onClick={()=>copyToClip(emailContentRef.current?.innerHTML)}>copy</Button>  
	      <div ref={emailContentRef}>
	        
	      </div>
	    </>
	  )
})

export default Item

react: copy a year ago

博客大纲

copy text

copy html