css - 如何在剪贴板中复制颜色,reactjs
问题描述
我是 reactjs 的初学者,我想在单击颜色时复制一种颜色。
应该怎么做?
import React from 'react';
const Green = ()=>{
return (
<div>
<h1 className='g-color-title'>Green Color</h1>
<div className='container-fluid'>
<div className='div-style' id='color31'> #2ECC72 </div>
<div className='div-style' id='color32'> #26AE60 </div>
<div className='div-style' id='color33'> #6AB04A </div>
<div className='div-style' id='color34'> #43BE31 </div>
<div className='div-style' id='color35'> #10A881 </div>
<div className='div-style' id='color36'> #019031 </div>
<div className='div-style' id='color37'> #75DA8B </div>
<div className='div-style' id='color38'> #218F76 </div>
<div className='div-style' id='color39'> #218F76 </div>
<div className='div-style' id='color40'> #7CEC9F </div>
</div>
</div>
)
}
export default Green;
解决方案
您可以使用navigator.clipboard.writeText()将文本复制到剪贴板。
我建议使用颜色对象,然后使用Object.entries()和map()创建<div>
s 并添加一个onClick()
来触发它:
const Green = () => {
const colors = {
color31: '#2ECC72',
color32: '#26AE60',
color33: '#6AB04A',
color34: '#43BE31',
color35: '#10A881',
color36: '#019031',
color37: '#75DA8B',
color38: '#218F76',
color39: '#218F76',
color40: '#7CEC9F',
};
return (
<div>
<h1 className='g-color-title'>Green Color</h1>
<div className='container-fluid'>
{Object.entries(colors).map(([id, color]) =>
<div className='div-style' id={id} onClick={navigator.clipboard.writeText(color)}>{color}</div>
)}
</div>
</div>
);
}
export default Green;
推荐阅读
- html - 没有前缀“file:///”的图像不显示在 HTML 中
- google-oauth - 当 GoogleAuthorizationCodeFlow 调用已批准的应用程序时未发布刷新令牌
- python - 从无量纲生成一维数组
- r - 用以前的非 NA 可用值 R 填充 NA
- xamarin - MvxSpinner 绑定到 ItemSource 属性不起作用
- python - 如何启用 Vim 折叠命令?
- jboss - 无法在 wildfly 上部署 KIE Server 7.70
- javascript - 使用 MediaRecorder API 在录制的视频中搜索不起作用
- php - 在 Codeception 中跳过多个组
- django - base.html 的 Django 全局变量