时间戳

首页 > 解决方案 > 在按钮上单击更改文本值

css - 在按钮上单击更改文本值

问题描述

我是 React js 的初学者，当我单击要更改十六进制值以将“已复制”显示为文本的任何颜色时，我遇到了问题

您可以在下面查看 img 作为示例 https://ibb.co/XWVzmwr

import React from 'react';

const Red = () =>{

    const colors = {
        color21 : '#FF3031',
        color22 : '#E84342',
        color23 : '#E44236',
        color24 : '#D63031',
        color25 : '#EC4849',
        color26 : '#E8290B',
        color27 : '#E8290B',
        color28 : '#AE1438',
        color29 : '#FF4848',
        color30 : '#FF362E', 
    }

    return (
        <div>
            <h1 className='r-color-title'>Red 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 Red;

标签： cssreactjsreact-hooksjsx

解决方案

您可以使用useState钩子来维护每个条目的颜色文本状态。然后更改状态以更新文本。

import React from 'react';

const defaultColors = {
        color21 : '#FF3031',
        color22 : '#E84342',
        color23 : '#E44236',
        color24 : '#D63031',
        color25 : '#EC4849',
        color26 : '#E8290B',
        color27 : '#E8290B',
        color28 : '#AE1438',
        color29 : '#FF4848',
        color30 : '#FF362E', 
    };

const Red = () => {

    const [colors, setColorState] = useState(defaultColors);

    return (
        <div>
            <h1 className='r-color-title'>Red Color</h1>
            <div className='container-fluid'>
                {Object.entries(colors).map(([id, color]) => 
                    <div className='div-style' id={id} onClick={()=> {
                      // Copy
                      navigator.clipboard.writeText(color);
                      // Create new colors state
                      const newColorState = {...defaultColors, [id]: 'Copied'};
                      // Update the state
                      setColorState(newColorState);
                      ///
                    }}>{color}</div>
                )}
            </div>   
        </div>
    )
}

export default Red;

我希望这应该有效。

推荐阅读