クリップボード機能の実装

17877 ワード

  • 利用するプラグインパッケージclipboard-polyfill
  • import React, {
          Component } from 'react'
    
    import clipboard from "clipboard-polyfill"
    import {
         Button} from "antd"
    
    export default class Main extends Component {
         
        constructor(props){
         
            super(props);
            this.state={
         
                opj:{
         
                    "param.code.name":" ",
                    "param.codexname":" ",
                    "param.code.age":" ",
                    "param.code.gender":" ",
                    "param.code.hobby":" ",
                },
                val:" ,  , , , , ",
                changeVal:""
            }
        }
        render() {
         
            //console.log(Object.entries(this.state))
            return (
                <div>
                    <div className="top">
                        {
         Object.entries(this.state.opj).map((item,index)=>{
         
                            return <Button  className="btn" key={
         index} onClick={
         this.copy.bind(this,index,item)}>{
         item[1]}</Button>
                        })}
                    </div>
                    <textarea name="" id="text" ref="text" onPaste={
         this.paste.bind(this)} cols="30" rows="10" value={
         this.state.val} onChange={
         (e)=>{
         
                        this.setState({
         
                            val:e.target.value
                        })
                    }} />
                    <button onClick={
         this.del.bind(this)}> value</button>
                    <button onClick={
         this.add.bind(this)}> value</button>
                </div>
            )
        }
        copy(index,item){
         
            //document.execCommand("Copy"); //  
            // let btn=document.querySelectorAll(".btn")[index]
            // btn.value=`[${item[1]}(${item[0]})]`
            // btn.select()
            // console.log(document.execCommand("Copy"))
            // btn.value=item[1]
            
            let text=`[${
         item[1]}(${
         item[0]})]`;
            // 
            clipboard.writeText(text)
            //console.log(text);
        }
        del(){
         
            let str=this.state.val;
            str=str.replace("]","")
            let res=/\[.*?\(/g;
            str=str.replace(res,"(")
            //console.log(str);
            this.setState({
         
                val:str
            })
        }
        add(){
         
            let str=this.state.val;
                if(str.indexOf("]")<0){
         
                    console.log(111)
                    str=str.replace(/\((.+?)\)/g,  ($0,$1,$2)=> {
         
                        console.log($0,$1,$2,"============");
                        return `[${
         this.state.opj[$1]}${
         $0}]`
                      });
                      console.log(str)
                      this.setState({
         
                        val:str
                      })
                }
           
        }
        // 
        paste(){
         
            //--------
            this.setState({
         
                changeVal:this.state.val
            })
            
        }
    }