react中如何实现点击按钮复制内容

Question

我想用document.execCommand("copy")实现点击按钮复制链接，但是显示

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%'
  }
  //复制事件函数
  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
网上也搜不到合理的解释，问题要怎么解决呢？

Answer 1

react-clipboard

Answer 2

clipboard

npm install clipboard --save
new ClipboardJS('.btn');

里面有很详细的文档，你的这个需求妥妥的，毕竟21000的star

Answer 3

copysvn 复制事件里面
this.refs.ref 没有拿到值
你可以console.log(this.refs.ref) ，值应该是undefined

Answer 4

把 style={{display: 'none'}} 去掉试试