在React中复制文本到剪贴板的例子

本教程包括使用以下两种方法复制文本到剪贴板

• navigator.clipboard
• 反应式拷贝到剪贴板 npm

navigator object 在javascript中提供了浏览器功能，它有访问系统剪贴板的API接口，它提供了本地操作系统的剪切、复制和粘贴功能。然而，剪贴板是存在于多个页面或请求中的短内容缓冲区。

反应中的系统剪贴板可以使用Navigator.clipboardAPI访问。writeText 方法提供将内容写入剪贴板。

Navigator支持所有主要的浏览器。

在这个例子中:

• 在一个页面上有一个文本框和按钮，点击按钮就可以把文本复制到剪贴板上。
• 用户在文本框中输入文本，事件处理程序onChange ，并将其存储到反应状态。
• 点击按钮时，onClick事件发生，它的事件处理程序执行。
• 在处理程序中，使用writeText 方法将文本框的值复制到剪贴板中。

import React, { Component } from 'react';

class CopyToClipboard extends Component {
    constructor(props) {
        super(props);

        this.state = {
            result: "",
            name: ""
        }
        // this.updateInput = this.updateInput.bind(this);
        // this.handleSubmit = this.handleSubmit.bind(this);

    }

    handleChange = (event) => {
        this.setState({ name: event.target.value })
    }
    handleSubmit(event) {
        console.log('kiran', event.target.value)
        try {
            navigator.clipboard.writeText(event.target.value);
            this.setState({
                result: "Copied To clipboard"
            });

        } catch (err) {
            this.setState({
                result: "Copy Failed"
            });
        }
    }


    render() {
        return (
            
                

                Copy text
                
                    status : {this.state.result}
                
               
            
        );
    }
}

export default CopyToClipboard;

同样的功能可以通过流行的react-copy-to-clipboard npm 库来实现

react-copy-to-clipboard 示例

首先，用下面的npm命令将react-copy-to-clipboard 库安装到现有的 react 应用程序中。

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

CopyToClipboard 是一个按钮的包装器或容器，它包含带有内容的文本属性和带有onCopy属性的结果回调。它有一个按钮作为子元素。

回调事件函数来绑定键入的文本。

完整的例子:

import React, { Component } from 'react';

class CopyToClipboard extends Component {
    constructor(props) {
        super(props);

        this.state = {
            result: "",
            name: ""
        }
    

    }

    handleChange = (event) => {
        this.setState({ name: event.target.value })
    }

    copyStatus() {
        this.setState({
            result: "Copied"
        });
    }


  render() {
        return (
            <div>
                <input type="text" onChange={this.updateInput} />

                <CopyToClipboard text={this.state.name} onCopy={this.copyStatus}>
                    <button>Copy</button>
                </CopyToClipboard>
                <div>
                    status : {this.state.result}
                </div>

            </div>
        );
    }
}

export default CopyToClipboard;