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

Question

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

Answer 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;