如何在剪贴板单击和复制时正确呈现成功消息答案

【问题标题】：How to properly render a success message upon clipboard click and copy如何在剪贴板单击和复制时正确呈现成功消息
【发布时间】：2020-12-09 07:46:30
【问题描述】：

我正在创建一个调色板，其中每个颜色旁边的工具提示组件中都有一个剪贴板图标。单击它会将颜色的名称复制到用户的剪贴板上。发生这种情况时，工具提示的消息应该从“复制”变为“复制成功”。我在尝试为每种颜色单独显示成功消息时遇到问题。

【问题讨论】：

标签： javascript reactjs material-ui frontend html5-clipboard-api

【解决方案1】：

你们所有Tooltip 组件都使用相同的父状态this.state.copyMessage。如果您单击一个复制，则将this.state.copyMessage 设置为"copy success"，并且它会为所有其他工具提示重新呈现。您需要能够：

确定谁被点击，
为每个工具提示提供状态，
为每个工具提示添加一个状态条目。

我个人会采用一种方法来确定谁被点击了。

全局声明

const PROMPT_MESSAGE = "Copy to clipboard"
const CLICKED_MESSAGE = "Copied!"

在点击时设置你的状态

setState({ clickedColor: color.name });

获取特定颜色的相应消息

const tooltipTitle = this.state.clickedColor === color.name
  ? CLICKED_MESSAGE
  : PROMPT_MESSAGE

传入标题

<Tooltip title={tooltipTitle} placement="right">
</Tooltip>

有很多方法可以解决这个问题，这只是我觉得可读的一种！

【讨论】：

啊好的，现在工具提示消息发生了变化，但第一次点击触发器在第一次点击时不起作用。我必须点击两次才能看到“复制成功”..
@darz123 我不确定原因是什么。我认为您应该尝试将初始状态设置为initialState = {clickedColor: ""}。我倾向于说这是 styleguidist 的怪癖。
@darz123 我还注意到您缺少 key 属性。当使用.map 之类的函数构建组件列表时，您应该传入key={something unique}。在这种情况下，您可以（可能）使用color.name。

【解决方案2】：

尝试将“事件”作为参数传递给您的 onClick 函数并使用 stopPropagation() 方法。像这样：

<Tooltip title={copyMessage} placement="right">
      <span
        onClick={(event) => {
          event.stopPropagation()
          copyNameToClipboard(color.name);
          setState({
            copyMessage: 'copy success',   
          });
        }}
      >

这应该会阻止您的事件“冒泡”到其他组件：

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

【讨论】：