Создание функции копирования-вставки в React: пошаговое руководство

Добавление функции копирования и вставки текста на ваш веб-сайт очень удобно, она упрощает процесс для пользователей, но возникают ли у вас трудности с ее реализацией?

В этой статье я дал пошаговые инструкции о том, как реализовать функцию копирования и вставки текста.

Я упомянул ссылку на репозиторий Github в конце статьи.

1. Импортируйте необходимые зависимости

import { useRef } from 'react'
import React from 'react'
import ClipboardJS from 'clipboard'

Хук useRef используется для доступа к элементу текстовой области, ClipboardJS — это библиотека для работы с буфером обмена.

2. Определите функциональный компонент CopyPaste, который возвращает форму с текстовой областью и двумя кнопками.

function CopyPaste() {
  const textAreaRef = useRef(null)
  ...
  return (
    <div style={{ color: 'white' }}>
      <form>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          ref={textAreaRef}
          id="name"
          className="form-control mb-2"
        />
        <button
          className="btn btn-outline-warning m-2 btn-copy"
          data-clipboard-target="#name"
        >
          Copy
        </button>
        <button
          className="btn btn-outline-info m-2"
          onClick={pasteFromClipboard}
        >
          Paste
        </button>
      </form>
    </div>
  )
}

Текстовая область создается с помощью элемента input, а атрибуту ref присваивается значение textAreaRef для доступа к нему в компоненте.

3. Реализуйте функцию копирования

  React.useEffect(() => {
    new ClipboardJS('.btn-copy', {
      text: function(trigger) {
        return trigger.getAttribute('aria-label')
      }
    })
  }, [])

Здесь хук useEffect используется для вызова конструктора ClipboardJS при монтировании компонента. Селектор .btn-copy используется для выбора кнопки копирования, и текст в текстовой области с id из name будет скопирован при нажатии кнопки.

4. Реализуйте функцию вставки

const pasteFromClipboard = (e) => {
  e.preventDefault()
  navigator.clipboard
    .readText()
    .then((text) => {
      textAreaRef.current.value = text
    })
    .catch((error) => {
      console.error(error)
    })
}

Функция pasteFromClipboard считывает текст из буфера обмена с помощью navigator.clipboard.readText и обновляет значение текстовой области возвращенным текстом. e.preventDefault используется для предотвращения поведения отправки формы по умолчанию.

5. Экспорт компонента

export default CopyPaste

6. Окончательный код должен выглядеть так:

import { useRef } from 'react'
import React from 'react'
import ClipboardJS from 'clipboard'

function CopyPaste() {
  const textAreaRef = useRef(null)

  React.useEffect(() => {
    new ClipboardJS('.btn-copy', {
      text: function(trigger) {
        return trigger.getAttribute('aria-label')
      }
    })
  }, [])

  const pasteFromClipboard = (e) => {
    e.preventDefault()
    navigator.clipboard
      .readText()
      .then((text) => {
        textAreaRef.current.value = text
      })
      .catch((error) => {
        console.error(error)
      })
  }

  const copyToClipboard = (e) => {
    e.preventDefault()
  }

  return (
    <div style={{ color: 'white' }}>
      <form>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          ref={textAreaRef}
          id="name"
          className="form-control mb-2"
        />
        <button
          className="btn btn-outline-warning m-2 btn-copy"
          data-clipboard-target="#name"
          onClick={copyToClipboard}
        >
          Copy
        </button>
        <button
          className="btn btn-outline-info m-2"
          onClick={pasteFromClipboard}
        >
          Paste
        </button>
      </form>
    </div>
  )
}

export default CopyPaste

Ссылка на репозиторий GitHub: https://github.com/vishwanath16/React-Copy-Paste-Example

Как запустить проект?

Начиная

Чтобы запустить проект, выполните следующие действия:

1. Клонировать репозиторий

клон git https://github.com/vishwanath16/React-Copy-Paste-Example.git

2. Установите зависимости

cd реагировать-копировать-вставить npm установить

3. Запустите сервер разработки

запуск нпм

Проект будет работать по адресу https://localhost:3000/.

Предпосылки

Для запуска этого проекта вам понадобятся следующие инструменты:

• Node.js
• npm (менеджер пакетов узла)

Построен с

• React — JavaScript-библиотека для создания пользовательских интерфейсов.
• ClipboardJS — современный подход к копированию текста в буфер обмена.