在按钮上单击更改文本值答案

【问题标题】：on button click change text value在按钮上单击更改文本值
【发布时间】：2020-11-17 04:18:15
【问题描述】：

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

【问题讨论】：

标签： css reactjs react-hooks jsx

【解决方案1】：

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

我希望这应该可行。

【讨论】：

【解决方案2】：

我认为您应该将初始颜色保存在第一个状态。至于第二种状态，您应该将所选项目保存到其中以具有最新的颜色，然后显示复制的文本。如果我错了，那么您应该详细描述您的期望。

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;

让我解释一件事。我在代码中使用了async/await 语法，因为navigator.clipboard.writeText 方法返回了Promise。您可以在文档中阅读有关使用它的信息。链接：https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

【讨论】：

【解决方案3】：

您可以简单地使用 css 'focus' 伪选择器进行“复制”文本显示，并为业务逻辑保持响应。

button {
  background: orange;
  display: inline-flex;
  width: 70px;
  height: 40px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
button:focus {
  outline: 0;
}
button:focus span {
  display: none;
}
button:focus:after {
  content: 'copied';
}

<button><span>#FF3031</span></button>
<button><span>#E84342</span></button>

【讨论】：

【解决方案4】：

作为 Sachin 答案的替代方案，您可以将选定的十六进制（或您决定的 ID）存储在组件的内部状态，然后在 render 进行相应处理

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>
  )
}

【讨论】：

非常有帮助的答案