Как скопировать текст в буфер обмена в Next.js?

Как добавить ввод тегов в NextJS Программирование и разработка

В статье мы рассмотрим, как интегрировать копирование текста в буфер обмена в приложении Next.js с помощью JavaScript.

В веб-разработке возможность копировать текст в буфер обмена имеет огромную ценность. Это дает пользователям возможность легко дублировать контент и переносить его в разные приложения или документы. Эта удобная функция упрощает обмен информацией и повышает удобство работы пользователей, обеспечивая плавную передачу данных между платформами.

Шаги по созданию приложения NextJS

Шаг 1. Создайте проект Next.js, используя следующую команду:

npx create-next-app my-clipboard-app

Термин NPX, сокращение от Node Package eXecute, служит удобным средством запуска пакетов NPM. Это позволяет разработчикам легко выполнять любой пакет Javascript из реестра NPM без необходимости установки. NPX автоматически устанавливается вместе с NPM версии 5.2.0 и выше.

Шаг 2. Перейдите в каталог:

cd my-clipboard-app

Структура проекта:

мин NPX, сокращение от Node Packa

Подход

Перехват useState используется компонентом для эффективного управления состоянием. Он отслеживает два важных элемента: введенный пользователем текст, который позже будет скопирован, и логическое значение, указывающее, был ли процесс копирования успешным. Функция handleCopyText выполняет важную задачу, обновляя состояние copyText текстом, предоставленным пользователем. Аналогично, функция copyToClipboard позволяет легко копировать значение, хранящееся в copyText, в буфер обмена. Это достигается с помощью метода document.execCommand(’copy’).

Пример: В этом примере мы скопируем текст в буфер обмена Next.js.

  • index.js file

Javascript

import React, { useState } from 'react';
 
const App = () => {
    const [userInput, setUserInput] = useState('');
    const [list, setList] = useState([]);
 
    // Set a user input value
    const updateInput = (value) => {
        setUserInput(value);
    };
 
    // Add item if user input is not empty
    const addItem = () => {
        if (userInput !== '') {
            const userInputItem = {
                // Add a random id which is used to delete
                id: Math.random(),
 
                // Add a user value to list
                value: userInput,
            };
 
            // Update list
            setList([...list, userInputItem]);
 
            // Reset state
            setUserInput('');
        }
    };
 
    // Function to delete item from list using id to delete
    const deleteItem = (key) => {
        const updatedList =
            list.filter((item) => item.id !== key);
        setList(updatedList);
    };
 
    const editItem = (index) => {
        const editedTodo = prompt('Edit the todo:');
        if (editedTodo !== null && editedTodo.trim() !== '') {
            const updatedTodos = [...list];
            updatedTodos[index].value = editedTodo;
            setList(updatedTodos);
        }
    };
 
    return (
        <div
            style={{
                fontFamily: 'Arial, sans-serif',
                maxWidth: '600px',
                margin: '0 auto',
                padding: '20px',
            }}
        >
            <div
                style={{
                    textAlign: 'center',
                    fontSize: '2.5rem',
                    fontWeight: 'bold',
                    marginBottom: '20px',
                    color: 'green',
                }}
            >
                Geeksforgeeks
            </div>
            <div
                style={{
                    textAlign: 'center',
                    fontSize: '1.5rem',
                    fontWeight: 'bold',
                    marginBottom: '20px',
                }}
            >
                TODO LIST
            </div>
            <div
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    marginBottom: '20px'
                }}
            >
                <input
                    style={{
                        fontSize: '1.2rem',
                        padding: '10px',
                        marginRight: '10px',
                        flexGrow: '1',
                        borderRadius: '4px',
                        border: '1px solid #ccc',
                    }}
                    placeholder="Add item..."
                    value={userInput}
                    onChange={(item) =>
                        updateInput(item.target.value)}
                />
                <button
                    style={{
                        fontSize: '1.2rem',
                        padding: '10px 20px',
                        backgroundColor: '#4caf50',
                        color: 'white',
                        border: 'none',
                        borderRadius: '8px',
                        cursor: 'pointer',
                    }}
                    onClick={addItem}
                >
                    ADD
                </button>
            </div>
            <div
                style={{
                    background: '#f9f9f9',
                    padding: '20px',
                    borderRadius: '8px'
                }}
            >
                {list.length > 0 ? (
                    list.map((item, index) => (
                        <div
                            key={index}
                            style={{
                                display: 'flex',
                                justifyContent: 'space-between',
                                alignItems: 'center',
                                marginBottom: '10px',
                            }}
                        >
                            <span style={{
                                fontSize: '1.2rem',
                                flexGrow: '1'
                            }}>
                                {item.value}
                            </span>
                            <span>
                                <button
                                    style={{
                                        padding: '10px',
                                        backgroundColor: '#f44336',
                                        color: 'white',
                                        border: 'none',
                                        borderRadius: '8px',
                                        marginRight: '10px',
                                        cursor: 'pointer',
                                    }}
                                    onClick={() => deleteItem(item.id)}
                                >
                                    Delete
                                </button>
                                <button
                                    style={{
                                        padding: '10px',
                                        backgroundColor: '#2196f3',
                                        color: 'white',
                                        border: 'none',
                                        borderRadius: '8px',
                                        cursor: 'pointer',
                                    }}
                                    onClick={() => editItem(index)}
                                >
                                    Edit
                                </button>
                            </span>
                        </div>
                    ))
                ) : (
                    <div
                        style={{
                            textAlign: 'center',
                            fontSize: '1.2rem',
                            color: '#777'
                        }}
                    >
                        No items in the list
                    </div>
                )}
            </div>
        </div>
    );
};
 
export default App;

Чтобы запустить приложение next.js, выполните следующую команду, а затем перейдите по адресу http://localhost:3000.

npm run dev

Выход :

Читайте также:  Константы в C

Скопировать текст в буфер обмена в NextJS

Скопировать текст в буфер обмена в NextJS

Оцените статью
bestprogrammer.ru
Добавить комментарий