Reactコンポーネント化レアクt-clipboardjs-copyをコピーします.

最近、clipboard.jsに基づくコピーコンポーネントを書きました.テキストのコピーとコピー先の要素をコンポーネント化します.
紹介します.
〹react-clipboardjs-copyclipboard.jsに基づくReact複製コンポーネント
インストール

npm install --save react-clipboardjs-copy

基本的な使い方

import React from 'react';
import {ReactClipboard} from 'react-clipboardjs-copy'
import './App.css';
export default class App extends React.Component {
    render () {
        return (
            <div className="App">
                <section className="app-item">
                    <div className="app-item-desc">copy textdiv>
                    <ReactClipboard text='copy text'
                        onSuccess={(e) => console.log(e)}
                        onError={(e) => console.log(e)}>
                        <button>Copybutton>
                    ReactClipboard>
                section>
            div>
        )
    }
}

 console.log(e)}
    onError={(e) => console.log(e)}
>
    Copy

設定

text−string Reactコンポーネントがコピーするコンテンツは、clipboard.jsのdata-clipboard-text属性に対応する.

target−string Reactコンポーネントのコピー対象要素は、clipboard.jsのdata-clipboard-target属性に対応する.

action−string Reactコンポーネントの動作は、clipboard.jsのdata-clipboard-action属性に対応する.しかし、現在はコピーのみがサポートされています.

selection-bollanはコピーの選択をクリアするかどうか設定します.clipboard.jsのイベントe.clearSelection()に対応しています.

onSuccess-function複製成功コール.

onError-functionコピーエラーコール.

開発

git clone [email protected]:freeshineit/react-clipboardjs-copy.git

cd react-clipboardjs-copy

npm install

npm run dev

問題があればissuesをお願いします.
求めますかとfork
転載先:https://juejin.im/post/5b31e3e5f265da59bd5eccb2