安利一个 react 点击复制插件:react-copy-to-clipboard

4,030 阅读1分钟

安装 react-copy-to-clipboard

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

使用

import React from 'react';
import ReactDOM from 'react-dom';
import {CopyToClipboard} from 'react-copy-to-clipboard';

class App extends React.Component {
  state = {
    value: '',
    copied: false,
  };

  render() {
    const { value, copied } = this.props;
    return (
      <div>
        <input value={value}
          onChange={({target: {value}}) => this.setState({value, copied: false})} />

        <CopyToClipboard text={value}
          onCopy={() => this.setState({copied: true})}>
          <span>点击复制</span>
        </CopyToClipboard>

        <CopyToClipboard text={value}
          onCopy={() => this.setState({copied: true})}>
          <button>点击复制</button>
        </CopyToClipboard>

        {copied ? <span style={{color: 'red'}}>复制成功!</span> : null}
      </div>
    );
  }
}

const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

总结:安装完成直接使用,很方便。将要复制的内容通过 test 传入组件:

<CopyToClipboard test={'要复制的内容'}>...</CopyToClipboard>