npm模块copy-to-clipboard复制内容到剪切板

Posted 2020-11-25 xy-ouyang

 

import React from ‘react‘
import copy from ‘copy-to-clipboard‘

export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            content: ‘‘
        }
    }

    render() {
        const { content } = this.state
        return (
            <div>
                <button type="primary" onClick={this.copyToClipboard}>点击复制输入框内容</button>
                <input type=‘text‘ value={content} onChange={this.inputChangeHandler} ref={input => this.myInput = input} />
            </div>
        )
    }

    copyToClipboard = () => {
        // Get the value of the `value` attribute of the <Input> component
        // copy(this.myInput.value)
        copy(this.state.content)
    }

    inputChangeHandler = e => {
        console.log(`e.target.value=${e.target.value}`)
        console.log(`this.myInput.value=${this.myInput.value}`)
        this.setState({ content: e.target.value })
    }
}

---