クリップボード機能の実装
17877 ワード
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
})
}
}