npm模塊copy-to-clipboard復制內容到剪切板

 

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 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 })
    }
}

---