react中如何實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制內(nèi)容

我想用document.execCommand("copy")實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制鏈接，但是顯示

TypeError: Cannot read property 'select' of undefined

代碼：

import React, { Component } from 'react'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card'
import RaisedButton from 'material-ui/RaisedButton'
import RemoveRedEye from 'material-ui/svg-icons/image/remove-red-eye'
import ActionGrade from 'material-ui/svg-icons/action/grade'
class card extends Component {
  state = {
    width: window.screen.availWidth > 1280 ? '20%' : '100%'
  }
  //復(fù)制事件函數(shù)
  copysvn = () => {
    this.refs.ref.select()
    document.execCommand("copy")
    console.log(1111)
  }
  render() {
    const ref = 'svn' + this.props.index
    const string = '喜歡' + this.props.like
    return (
      <MuiThemeProvider>
      <Card style={{width: this.state.width, margin: '10px 2.5%', float: 'left'}}>
        <CardHeader
        title={this.props.headtitle}
        subtitle={this.props.headsubtitle}
        avatar={this.props.avatar}
        />
        <CardMedia
        >
          <img src={this.props.imgsrc} alt="" />
        </CardMedia>
        <CardTitle title={this.props.cardtitle} subtitle={this.props.subtitle} />
        <CardText style={{height: '100px', overflow: 'hidden'}}>
          {this.props.cardtext}
        </CardText>
        <CardActions>
          <input type="text" ref={ref} value={this.props.svn} style={{display: 'none'}}/>
          <RaisedButton label="svn地址" primary={true} onClick={this.copysvn} icon={<RemoveRedEye />}/>
          <RaisedButton label={string} primary={true} icon={<ActionGrade />}/>
        </CardActions>
        </Card>
      </MuiThemeProvider>
    )
  }
}

export default card
網(wǎng)上也搜不到合理的解釋，問題要怎么解決呢？