问题描述
我正在开发一种Color应用程序来选择您需要的颜色,并且遇到一个问题,即用户单击颜色框时复制的消息不会显示 你能告诉我为什么复制的消息没有显示
传递的道具是颜色名称和颜色背景 例如-
<ColorBox name = "BEEKEEPER 500" background = "#eedd86"/>
import React,{ Component } from 'react'
import {copyToClipboard} from 'react-copy-to-clipboard'
import './ColorBox.css';
export default class ColorBox extends Component {
constructor(props) {
super(props)
this.state = {
copied:false
}
this.changecopyState = this.changecopyState.bind(this);
}
changecopyState(){
this.setState({copied:true},()=>{
setTimeout(()=>this.setState({copied:false}),1500)
});
}
render() {
const {name,background} = this.props;
const {copied} = this.state;
return (
<copyToClipboard text={background} oncopy={this.changecopyState}>
<div style={{ background }} className='ColorBox'>
<div
style={{ background }}
className={`copy-overlay ${copied && "show"}`}
/>
<div className={`copy-msg ${copied && "show"}`}>
<h1>copied</h1>
<p>{background}</p>
</div>
<div className="copy-container">
<div className="Box-content">
<span>{name}</span>
</div>
<button className='copy-button'>copy</button>
</div>
<span className='see-more'>More</span>
</div>
</copyToClipboard>
)
}
}
.ColorBox{
width:20%;
height:25%;
margin:0 auto;
display:inline-block;
position:relative;
cursor:pointer;
margin-bottom:-3.5px;
}
.copy-button{
width:100px;
height: 30px;
position: absolute;
display: inline-block;
top:50%;
left:50%;
margin-left: -50px;
margin-top:-15px;
text-align:center;
outline:none;
background:rgba(255,255,0.3);
font-size:1rem;
line-height:30px;
color:white;
text-transform: uppercase;
border:none;
opacity: 0;
}
.ColorBox:hover .copy-button{
opacity:1;
transition: 0.5s;
}
.Box-content{
position: absolute;
width:100%;
left:0px;
bottom:0px;
color:black;
padding:10px;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 12px;
}
.see-more{
background:rgba(255,0.3);
position: absolute;
border:none;
right:0px;
bottom:0px;
color:white;
width:60px;
height:30px;
text-align:center;
line-height: 30px;
text-transform: uppercase;
}
.copy-overlay{
opacity:0;
z-index:0;
width:100%;
height: 100%;
transition: transform 0.6s ease-in-out;
transform:scale(0.1);
}
.copy-overlay.show{
opacity:1;
transform:scale(50);
z-index:10;
position: absolute;
}
.copy-msg{
position: fixed;
top:0;
bottom:0;
top:0;
left:0;
display: flex;
align-items:center;
justify-content: center;
flex-direction: column;
font-size:4rem;
transform: scale(0.1);
opacity:0;
color:white;
}
copy-msg.show{
opacity:1;
transform:scale(1);
z-index: 25;
transition:all 0.4s ease-in-out;
transition-delay:0.3s;
}
.copy-msg h1{
font-weight:400;
text-shadow: 1px 2px black;
background:rgba(255,0.2);
width:100%;
text-align:center;
margin-bottom: 0;
padding:1rem;
text-transform: uppercase;
}
.copy-msg p{
font-size:2rem;
font-weight: 100;
}```
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)