Как правильно отобразить сообщение об успехе после нажатия и копирования из буфера обмена

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