Css 如何在剪贴板中复制颜色

我是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;

从“React”导入React；
常量绿色=（）=>{
返回(
绿色
#2ECC72
#26AE60
#6AB04A
#43BE31
#10A881
#019031 
#75DA8B
#218F76
#218F76
#7CEC9F
)   
}
导出默认绿色；

您可以使用将文本复制到剪贴板

我建议使用颜色对象，然后使用并创建

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;

const Green=（）=>{
常量颜色={
颜色31:“#2ECC72”，
颜色32:“#26AE60”，
颜色33:“#6AB04A”，
颜色34:“#43BE31”，
颜色35:“#10A881”，
颜色36:“#019031”，
颜色37:“#75DA8B”，
颜色38:“#218F76”，
颜色39:“#218F76”，
颜色40:“#7CEC9F”，
};
返回(
绿色
{Object.entries（colors）.map（[id，color]）=>
{color}
)}
);
}
导出默认绿色；

您想通过单击div复制十六进制值吗？请尝试查看此链接，先生，也许这会对您有所帮助