Reactjs 将文本复制到剪贴板react.js

我想在单击时将文本复制到剪贴板。我正在使用“将副本复制到剪贴板”组件。但它显示了一些错误，因为未定义状态，也未定义onCopy。这是我的密码

import React from 'react';
import {GridList} from 'material-ui/GridList';
import Grid from '@material-ui/core/Grid';
import FontIcon from 'material-ui/FontIcon';
import {CopyToClipboard} from 'react-copy-to-clipboard';
import Typography from '@material-ui/core/Typography';
import gradientDownloader from './gradientDownloader';

function downloadGrad(){
  console.log('It is clicked');
}

export default function GradientCard(props){
  state = {
    value: '',
    copied: false,
  };
  onCopy = () => {
    this.setState({copied: true});
  };
    return(
    <div style={styles.root}>
    <Grid container spacing={0} style={{maxWidth: '1360px', margin: '0 auto', paddingTop: '80px'}}>
      <Grid item lg={9} md={10} sm={12} xs={12}>
        <GridList
          cellHeight='auto'
          cols = {4}
          padding= {16}
          style={styles.gridList}
        >
        {
            props.data.map(grad => {
                return(
                    <div style={styles.card} key={grad.name}>
                        <div id="gradColor" style={{background: 'linear-gradient(to right, '+grad.colors[0]+', '+grad.colors[1]+'', height: '100px', borderRadius: '4px'}}></div>
                        <div>
                            <CopyToClipboard onCopy={this.onCopy} text={this.state.value}>
                  <span style={styles.hexValue} value={this.state.value}>{grad.colors[0]}</span>
                </CopyToClipboard>
                            <FontIcon className="material-icons" style={styles.iconStyles}>arrow_right_alt</FontIcon> 
                            <span style={styles.hexValue}>{grad.colors[1]}</span>
                        </div>
                        <Typography style={{paddingTop: '16px'}}>{grad.name}</Typography>
              <span onClick={downloadGrad}>DOWNLOAD</span>
                    </div>
                )
            })
        }
        </GridList>
      </Grid>
      <Grid item lg={3} md={2} sm={12} xs={12}>
        <Typography style={styles.gridList}>HELLO WORLD</Typography>
      </Grid>
    </Grid>  
    </div>
    )
};

从“React”导入React；
从“物料ui/GridList”导入{GridList}；
从“@material ui/core/Grid”导入网格；
从“材质ui/FontIcon”导入FontIcon；
从“将副本复制到剪贴板”导入{CopyToClipboard}；
从“@material ui/core/Typography”导入排版；
从“/gradientDownloader”导入gradientDownloader；
函数downloadGrad（）{
log（'单击它'）；
}
导出默认功能梯度卡（道具）{
状态={
值：“”，
抄袭：假，
};
肿瘤学=（）=>{
this.setState（{copied:true}）；
};
返回(
{
props.data.map（grad=>{
返回(
{grad.colors[0]}
向右箭头
{grad.colors[1]}
{grad.name}
下载
)
})
}
你好，世界
)
};

---

是我用过的组件。我认为这是必须的。如果我在返回之前进行了渲染，它会显示意外标记。有人能帮我解决这个问题吗。

GradientCard

是一个

不受控制的
组件，因此您不能在其中使用
状态
。使其成为受控的
组件。希望它能起作用
 你可以这样试试

npm安装--将副本保存到剪贴板

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() {
    return (
      <div>
        <input value={this.state.value}
          onChange={({target: {value}}) => this.setState({value, copied: false})} />

        <CopyToClipboard text={this.state.value}
          onCopy={() => this.setState({copied: true})}>
          <span>Copy to clipboard with span</span>
        </CopyToClipboard>

        <CopyToClipboard text={this.state.value}
          onCopy={() => this.setState({copied: true})}>
          <button>Copy to clipboard with button</button>
        </CopyToClipboard>

        {this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}
      </div>
    );
  }
}

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

从“React”导入React；
从“react dom”导入react dom；
从“将副本复制到剪贴板”导入{CopyToClipboard}；
类应用程序扩展了React.Component{
状态={
值：“”，
抄袭：假，
};
render（）{
返回(
this.setState（{value，copied:false}）}/>
this.setState（{copied:true}}>
使用span复制到剪贴板
this.setState（{copied:true}}>
使用按钮复制到剪贴板
{this.state.copied？复制：null}
);
}
}
const approt=document.createElement（'div'）；
文件.正文.附件（批准）；
ReactDOM.render（
你试过做一些研究吗？因为我们有这么多可用的软件包，而且使用起来也很简单。如果你能在提问之前做一些研究就好了：）。。其中一个非常有效的软件包是