How to click the button to copy the content in react

I want to use document.execCommand ("copy") to click the button to copy the link, but display

TypeError: Cannot read property "select" of undefined

Code:

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

Feb.27,2021

clipboard

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

there are very detailed documents. Your requirements are proper. After all, 21000 star


react-clipboard


copysvn copy event
this.refs.ref does not get the value
you can console.log (this.refs.ref), the value should be undefined


remove style= {{display: 'none'}} and try

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e9363b-1451.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e9363b-1451.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?