# CopyToClipboard

将文本到剪切板，复制到剪贴板功能可以应用于各种元素。

## 案例演示

### CopyToClipboard 基本使用

---demo
```js
import { CopyToClipboard } from 'amos-framework';

ReactDOM.render((
  <CopyToClipboard text="我被一个连接复制了！" successTip="复制成功！">点击我复制</CopyToClipboard>
), _react_runner_);
```
---demoend

### CopyToClipboard 禁用提示

---demo
```js
import { CopyToClipboard } from 'amos-framework';

ReactDOM.render((
  <CopyToClipboard diableTip text="我被一个连接复制了！" successTip="复制成功！">点击我复制(我不会提示)</CopyToClipboard>
), _react_runner_);
```
---demoend

### CopyToClipboard 自定义children

---demo
```js
import { CopyToClipboard, Button } from 'amos-framework';

const copyText = '我是待复制内容';

ReactDOM.render((
  <div>
    <div>点击复制：{copyText}</div>
    <CopyToClipboard style={{ marginTop: 10, display: 'inline-block' }} text={copyText} tooltip="复制成功！">
      <Button size="sm">点击复制</Button>
    </CopyToClipboard>
  </div>
), _react_runner_);
```
---demoend

### CopyToClipboard 混合使用

---demo
```js
import { CopyToClipboard, Button } from 'amos-framework';

class Demo extends Component {
  state = {
    iptCopy: '测试数据'
  };

  onChange = (e) => {
    this.setState({
      iptCopy: e.target.value
    });
  }

  saveRef = (node) => {
    this.iptRef = node;
  }

  render() {
    const { iptCopy } = this.state;
    return (
      <div>
        <Input ref={this.saveRef} type="text" value={iptCopy} onChange={this.onChange} />
        <CopyToClipboard
          style={{ marginTop: 10, display: 'inline-block' }}
          text={iptCopy}
          successTip="复制成功！"
          onClick={() => {
            ReactDOM.findDOMNode(this.iptRef).querySelector('input').select();
          }}
        >
          <Button size="sm">点击复制</Button>
        </CopyToClipboard>
    </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 使用CopyToClipboard.doCopy 直接拷贝

---demo
```js
import { Button, CopyToClipboard } from 'amos-framework';

const copyText = '我是待复制内容';

const handleCopy = () => {
  CopyToClipboard.doCopy(copyText, (isCopy) => {
    console.log('copy result:', isCopy);
  })
}

ReactDOM.render((
  <Button size="sm" onClick={handleCopy}>点击复制</Button>
), _react_runner_);
```
---demoend

## Props

| params  | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | String | `amos-copy-to-clipboard` | 样式前缀 |
| children | ReactNode | - | 自定义显示内容 |
| text | String | - | 拷贝的文本 |
| successTip | String、ReactNode | `复制成功！` | 拷贝成的提示 |
| diableTip | boolean | - | 禁用默认提示 |
| onClick | Function(text, isCopy, event) | - | 点击拷贝时的回调事件 |

### Methods

`CopyToClipboard.doCopy(text, callback)`

```js
import { CopyToClipboard } from 'amos-framework';

CopyToClipboard.doCopy('我是待拷贝内容', (isCopy) => {
  console.log('copy result:', isCopy);
})
```