Копирование текста в буфер обмена на ReactJS: решение

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

В ReactJS для копирования текста в буфер обмена применяется метод navigator.clipboard.writeText():

Скопировать код

const copyTextToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
    console.log('Текст успешно скопирован в буфер обмена!');
  } catch (err) {
    console.error('Ошибка:', err);
  }
};

Вызывать эту функцию можно так:

Скопировать код

<button onClick={() => copyTextToClipboard('Текст для копирования')}>Копировать</button>

Это быстрый и эффективный способ: достаточно нажать кнопку, и текст уже скопирован.

Кинга Идем в IT: пошаговый план для смены профессии

Чтение древних свитков (Работа со старыми браузерами)

Для старых браузеров используйте методы document.execCommand или window.clipboardData.setData.

Скопировать код

const copyTextWithFallback = (text) => {
  const inputArea = document.createElement('textarea');
  inputArea.value = text;
  document.body.appendChild(inputArea);
  inputArea.select();
  try {
    const success = document.execCommand('copy');
    console.log(`Альтернативный метод: копирование ${success ? 'успешно выполнено' : 'не удалось'}`);
  } catch (err) {
    console.error('Альтернативный метод: ошибка при копировании', err);
  }
  document.body.removeChild(inputArea);
};

И изучаем, и анализируем! (Определение поддержки копирования)

Проверить поддержку копирования текста в браузере можно следующим образом:

Скопировать код

const isCopySupported = () => document.queryCommandSupported('copy');

Применение магии с react-copy-to-clipboard

Если не хотите заморачиваться с реализацией, можно использовать пакет react-copy-to-clipboard.

Bash

Скопировать код

npm install --save react-copy-to-clipboard

Этот компонент поможет вам без боли и муки скопировать текст:

Скопировать код

import { CopyToClipboard } from 'react-copy-to-clipboard';

const YourComponent = () => {
  const [text, setText] = useState('Текст для копирования');
  const [isCopied, setIsCopied] = useState(false);

  const onCopyText = () => {
    setIsCopied(true);
    setTimeout(() => setIsCopied(false), 1500);
  };

  return (
    <>
      <input value={text} onChange={({target}) => setText(target.value)} />
      <CopyToClipboard text={text} onCopy={onCopyText}>
        <button>Копировать</button>
      </CopyToClipboard>
      {isCopied ? <span style={{color: 'green'}}>Скопировано!</span> : null}
    </>
  );
};

Визуализация

Представьте процесс копирования текста в ReactJS. Вкратце выглядит это так:

Markdown

Скопировать код

1. Выделяем текст
2. Безопасно помещаем его в буфер обмена

На практике это реализуется так:

Скопировать код

function copyToClipboardSecurely(text) {
    navigator.clipboard.writeText(text);
}

Инициализируем:

Скопировать код

copyToClipboardSecurely('Секретный текст'); // Текст теперь в буфере обмена

Проверка содержимого буфера обмена:

plaintext

Скопировать код

Содержимое буфера обмена: 'Секретный текст'

Теперь вы ознакомлены с визуализацией этого процесса.

Вникание в различные сценарии (Многоаспектные шаблоны использования)

Связь с элементами ввода

Связываем функцию копирования с полем ввода, чтобы увеличить скорость работы:

Скопировать код

const CopyInputText = ({ value }) => {
  const inputRef = useRef();

  const copyText = () => {
    inputRef.current.select();
    copyTextToClipboard(value);
  };

  return (
    <>
      <input ref={inputRef} value={value} readOnly />
      <button onClick={copyText}>Копировать</button>
    </>
  );
};

Подробнее об этом расскажет наш спикер на видео

Кнопка с чувством юмора (Кнопка с состоянием и отзывом)

Добавьте кнопку, которая не только копирует текст, но и отображает состояние:

Скопировать код

const CopyButtonWithFeedback = ({ textToCopy }) => {
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    await copyTextToClipboard(textToCopy);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <button onClick={handleCopy}>
      {copied ? 'Готово!' : 'Копировать'}
    </button>
  );
};

Автопилот (Автоматическое копирование без участия пользователя)

Автоматизируйте процесс копирования для повторяющихся задач:

Скопировать код

useEffect(() => {
  const copyTextAutomatically = async () => {
    await copyTextToClipboard('Автоматически скопированный текст');
    // Выполните дополнительную логику после копирования, если нужно
  };
  copyTextAutomatically();
}, []);

Полезные материалы

Clipboard API – Web APIs | MDN — детальное описание API для взаимодействия с буфером обмена.
javascript – Как скопировать текст в буфер обмена в ReactJS? – Stack Overflow — обсуждение способов копирования текста в ReactJS на форуме.
Clipboard: метод writeText() – Web APIs | MDN — подробное описание метода writeText().
Как скопировать текст в буфер обмена — пошаговый гид по процессу копирования текста.
react-copy-to-clipboard – npm — npm пакет, упрощающий копирование текста в ReactJS.
Как использовать Web Share API | CSS-Tricks — обзор распространения контента через интерфейсы копирования и обмена.
Освобождаем доступ к буферу обмена | Статьи | web.dev — статья о применении асинхронности в работе с буфером обмена.

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

Какой метод используется в ReactJS для копирования текста в буфер обмена?

1 / 5

Свежие материалы

Как использовать Google Authenticator для двухфакторной аутентификации в Fortnite

6 сентября 2024

Как выбрать версию Swift для скачивания

6 сентября 2024

Видео уроки по C#

6 сентября 2024