Css 在按钮上单击“更改文本值”

我是react js的初学者，当我点击任何想要改变十六进制值的颜色以显示“复制”为文本时，我遇到了一个问题

你可以看到下面的img作为一个例子

从“React”导入React；
常数红色=（）=>{
常量颜色={
颜色21:“#FF3031”，
颜色22:“#E84342”，
颜色23:“#E44236”，
颜色24:“#D63031”，
颜色25:“#EC4849”，
颜色26:“#E8290B”，
颜色27:“#E8290B”，
颜色28:“#AE1438”，
颜色29:“#FF4848”，
颜色30:“#FF362E”，
}
返回(
红色
{Object.entries（colors）.map（[id，color]）=>
navigator.clipboard.writeText（color）}>{color}
)}
)
}
导出默认红色；

您可以使用

useState

hook来维护每个条目的彩色文本状态。然后更改状态以更新文本

从“React”导入React；
常量默认颜色={
颜色21:“#FF3031”，
颜色22:“#E84342”，
颜色23:“#E44236”，
颜色24:“#D63031”，
颜色25:“#EC4849”，
颜色26:“#E8290B”，
颜色27:“#E8290B”，
颜色28:“#AE1438”，
颜色29:“#FF4848”，
颜色30:“#FF362E”，
};
常数红色=（）=>{
const[colors，setColorState]=使用状态（defaultColors）；
返回(
红色
{Object.entries（colors）.map（[id，color]）=>
{
//抄袭
navigator.clipboard.writeText（颜色）；
//创建新的颜色状态
const newColorState={…defaultColors，[id]：'Copied'}；
//更新状态
setColorState（newColorState）；
///
}}>{color}
)}
)
}
导出默认红色；

---

我希望这能起作用。

作为Sachin回答的替代方案，您可以做的是将选定的十六进制（或id，由您决定）存储在组件的内部状态，然后在

渲染时相应地处理它

const Red = () => {

 const [selectedHex, setSelectedHex] = useState(null)

  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' style={{display: "flex"}}>
        {Object.entries(colors).map(([id, color]) =>
          <div className='div-style' id={id} style={{background: color, width: 100, height: 100}} onClick={() => {
            navigator.clipboard.writeText(color)
            setSelectedHex(color)
          }}
          >{color === selectedHex ? "Copied" : color}</div>
        )}
      </div>
    </div>
  )
}

const Red=（）=>{
常量[selectedHex，setSelectedHex]=useState（null）
常量颜色={
颜色21:“#FF3031”，
颜色22:“#E84342”，
颜色23:“#E44236”，
颜色24:“#D63031”，
颜色25:“#EC4849”，
颜色26:“#E8290B”，
颜色27:“#E8290B”，
颜色28:“#AE1438”，
颜色29:“#FF4848”，
颜色30:“#FF362E”，
}
返回(
红色
{Object.entries（colors）.map（[id，color]）=>
{
navigator.clipboard.writeText（彩色）
setSelectedHex（彩色）
}}
>{color===selectedHex？“复制”：color}
)}
)
}
我认为你应该在第一个州保存你的初始颜色。至于第二种状态，您应该将所选项目保存到其中，使其具有最新的颜色，然后显示复制的文本。如果我错了，那么你应该详细描述你的期望

import React, { useState, useCallback } from "react";

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

const Red = () => {
  const [colors] = useState(initialColors);
  const [selectedColor, setSelectedColor] = useState({});

  const handleClick = useCallback(
    async color => {
      try {
        await navigator.clipboard.writeText(color);
        setSelectedColor(color);
      } catch (error) {
        console.log(error.message);
      }
    },
    [setSelectedColor]
  );

  return (
    <div>
      <h1 className="r-color-title">Red Color</h1>
      <div className="container-fluid">
        {Object.entries(colors).map(([id, color]) => (
          <div
            className="div-style"
            key={id}
            onClick={() => handleClick(color)}
          >
            {selectedColor.color === color ? "Copied" : color}
          </div>
        ))}
      </div>
    </div>
  );
};

export default Red;

import React，{useState，useCallback}来自“React”；
常量初始颜色={
颜色21:#FF3031“，
颜色22:#E84342“，
颜色23:#E44236“，
颜色24:#D63031“，
颜色25:#EC4849“，
颜色26:“#E8290B”，
颜色27:“#E8290B”，
颜色28:#AE1438“，
颜色29:#FF4848“，
颜色30:“FF362E”
};
常数红色=（）=>{
常量[颜色]=使用状态（初始颜色）；
const[selectedColor，setSelectedColor]=useState（{}）；
const handleClick=useCallback(
异步颜色=>{
试一试{
等待navigator.clipboard.writeText（颜色）；
设置所选颜色（颜色）；
}捕获（错误）{
console.log（错误消息）；
}
},
[设置选定颜色]
);
返回(
红色
{Object.entries（colors）.map（[id，color]）=>(
handleClick（颜色）}
>
{selectedColor.color==color？“复制”：color}
))}
);
};
导出默认红色；

让我解释一件事。我在代码中使用了
async/await
语法，因为
navigator.clipboard.writeText
方法返回承诺。您可以在文档中了解如何使用它。链接：
您只需将css“焦点”伪选择器用于“复制”文本显示，并保持对业务逻辑的反应


按钮{
背景：橙色；
显示：内联flex；
宽度：70px；
高度：40px；
证明内容：中心；
对齐项目：居中；
光标：指针；
}
按钮：焦点{
大纲：0；
}
按钮：焦点范围{
显示：无；
}
按钮：焦点：之后{
内容：“复制”；
}
#FF3031
#E84342
非常有用的答案
import React, { useState, useCallback } from "react";

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

const Red = () => {
  const [colors] = useState(initialColors);
  const [selectedColor, setSelectedColor] = useState({});

  const handleClick = useCallback(
    async color => {
      try {
        await navigator.clipboard.writeText(color);
        setSelectedColor(color);
      } catch (error) {
        console.log(error.message);
      }
    },
    [setSelectedColor]
  );

  return (
    <div>
      <h1 className="r-color-title">Red Color</h1>
      <div className="container-fluid">
        {Object.entries(colors).map(([id, color]) => (
          <div
            className="div-style"
            key={id}
            onClick={() => handleClick(color)}
          >
            {selectedColor.color === color ? "Copied" : color}
          </div>
        ))}
      </div>
    </div>
  );
};

export default Red;