如何在剪贴板中复制颜色，reactjs

Posted 2023-02-21

【中文标题】如何在剪贴板中复制颜色，reactjs

【英文标题】：how to copy color in clipboard , reactjs

【发布时间】：2020-11-16 12:03:43

【问题描述】：

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

【问题讨论】：

你想通过点击div来复制十六进制值吗？

试试看这个链接先生，也许这对你有帮助***.com/questions/39501289/…

【参考方案1】：

您可以使用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;