如何将文本复制到 React.js 中的剪贴板？

以下示例介绍了如何使用useState()挂钩将文本复制到 React JS 中的剪贴板。

先决条件：

• npm & create-react-app 命令的基础知识。
• 样式组件的基本知识。
• useState() React hooks 的基础知识。

基本设置：您将使用create-react-app使用以下命令启动一个新项目：

npx create-react-app react-copy-text

现在通过在终端中键入给定的命令转到您的react-copy-text文件夹。

cd react-copy-text

所需模块：通过在终端中键入给定命令来安装此项目所需的依赖项。

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

现在在 src 中创建components文件夹，然后转到 components 文件夹并创建两个文件Clipboard.js和Styles.js 。

项目结构：项目中的文件结构将如下所示。

示例：我们创建一个状态，第一个元素 copyText 作为初始状态，其值为空字符串，第二个元素作为函数setCopyText()用于更新状态。然后通过名称handleCopyText创建一个函数，它将状态值设置为我们输入输入字段的文本。创建另一个函数copyToClipboard以将更新的状态值复制到剪贴板。

当我们在输入字段中输入文本时，handleCopyText函数通过onChange 事件触发，该事件将状态设置为输入的值。现在，当我们单击“复制到剪贴板”按钮时，函数copyToClipboard 通过onClick 事件触发，该事件使用copy()函数将状态值复制到剪贴板。现在我们可以通过单击Ctrl+V键将文本复制到任何地方。

Clipboard.js

import React,{useState} from 'react'
import copy from "copy-to-clipboard";  
import { Heading, Input1, Input2, Container, Button } from './Styles'
  
const Clipboard = () => {
    const [copyText, setCopyText] = useState('');
  
    const handleCopyText = (e) => {
       setCopyText(e.target.value);
    } 
    
    const copyToClipboard = () => {
       copy(copyText);
       alert(`You have copied "${copyText}"`);
    }
      
    return (
      

        GeeksForGeeks
        
        
          
    
          
               Copy to Clipboard
          
    
          
        
    
      
    )
}
  
export default Clipboard;

样式.js

import styled from 'styled-components';
  
export const Container = styled.div`
   width: 600px;
   margin: 40px auto;
   position: relative;
`
export const Heading = styled.h1`
   text-align: center;
   color: green;
`;
  
export const Input1 = styled.input`
   height: 50px;
   width: 100%;
   padding: 0;
   font-size: 25px;
`
export const Input2 = styled.input`
   height: 50px;
   width: 100%;
   padding: 0;
   font-size: 25px;
   margin-top: 70px;
`
  
export const Button = styled.button` 
  padding: 20px; 
  font-size: 20px; 
  position: relative; 
  left: 30%; 
  margin-top: 10px; 
  cursor: pointer;
`;

应用程序.js

import Clipboard from './components/Clipboard'
  
function App() {
  return (
    
  );
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：