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

Question

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

Answer 1

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

1. 识别谁被点击，
2. 为每个工具提示提供状态，
3. 每个工具提示添加一个状态条目。

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

全球申报

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

设置你的状态 onClick

setState({ clickedColor: color.name });

获取特定颜色的相应消息

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

传入标题

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

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

Answer 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