Javascript 无法使用复制到剪贴板

我有一个联系我的部分，我有电子邮件ID，所以我想当人们点击电子邮件ID时，电子邮件ID会复制到他们的剪贴簿上

这是密码

 return (
        <InfoContainer lightBg={lightBg} id={id}>
            <InfoWrapper>
                <InfoRow imgStart={imgStart}>
                    <Column1>
                    <TextWrapper>
                        <TopLine>{topLine}</TopLine>
                        <Subtitle darkText={darkText}>{headLine}</Subtitle>
                        <Heading lightText={lightText}>{description}</Heading>
                        <Subtitle darkText={darkText}>{headLine2}</Subtitle>
                    </TextWrapper>
                    </Column1>
                    <Column2>
                        <ImgWrap>
                            <Img src={img} alt={alt} />
                        </ImgWrap>
                    </Column2>
                </InfoRow>
            </InfoWrapper>
        </InfoContainer>
    )
}

我传递的

说明

是电子邮件ID，这是我唯一想复制的东西

标题

为样式化组件，如下所示

export const Heading = styled.h1`
  color: #fff;
  margin-bottom: 24px;
  font-size: 30px;
  line-height: 1.1 ;
  font-weight: 600;
  color: ${({ lightText }) => (lightText ? '#f7f8fa' : '#010606')};

  @media screen and (max-width: 480px) {
    font-size: 18px;
  }
`;

我如何使它看起来像一个链接？可能是当人们将鼠标悬停在文本上方，并在其上加下划线，然后单击该文本时，该文本会被复制，同时该文本也会被复制

我试着让这项工作从-

但它不起作用。请帮忙

更新：对于

onCopy（）

我尝试了这个，但出现了一个错误

const InfoSection = ({
    lightBg,
    imgStart,
    topLine,
    lightText,
    headLine,
    description,
    headLine2,
    img,
    alt,
    id,
    darkText,
  }) => {
    state = {
        value: '',
        copied: false,
      };
    return (
        <InfoContainer lightBg={lightBg} id={id}>
            <InfoWrapper>
                <InfoRow imgStart={imgStart}>
                    <Column1>
                    <TextWrapper>
                        <TopLine>{topLine}</TopLine>
                        <Subtitle darkText={darkText}>{headLine}</Subtitle>
                        <CopyToClipboard text={description} onCopy={() => this.setState({copied: true})}>
                            <Heading lightText={lightText}>{description}</Heading>
                        </CopyToClipboard>
                        {this.state.copied ? <span style={{color: '#01BF71'}}>Copied.</span> : null}
                        <Subtitle darkText={darkText}>{headLine2}</Subtitle>
                    </TextWrapper>
                    </Column1>
                    <Column2>
                        <ImgWrap>
                            <Img src={img} alt={alt} />
                        </ImgWrap>
                    </Column2>
                </InfoRow>
            </InfoWrapper>
        </InfoContainer>
    )
}

const InfoSection=({
lightBg，
imgStart，
背线，
lightText，
大字标题
描述
头条新闻2，
img，
中高音，
身份证件
黑暗文本，
}) => {
状态={
值：“”，
抄袭：假，
};
返回(
{topLine}
{标题}
this.setState（{copied:true}}>
{说明}
{this.state.copied？复制：null}
{headLine2}
)
}

错误

“状态”未定义无未定义

如何在此处定义状态？
如果要使用
react copy to clipboard
库

您应该像这样包装
标题
：

import {CopyToClipboard} from 'react-copy-to-clipboard';

...

<CopyToClipboard text={description}>
   <Heading lightText={lightText}>{description}</Heading>
<CopyToClipboard>

编辑：

为了在下面显示复制的，
使用
CopyToClipboard
组件的
onCopy
prop复制文本时，需要有一个改变其值的状态，如下所示：

const InfoSection = ({
    lightBg,
    imgStart,
    topLine,
    ...
  }) => {

  const [copied, setCopyStatus] = React.useState(false)

  ...

  <CopyToClipboard text={description} onCopy={() => setCopyStatus(true)}>
   <Heading lightText={lightText}>{description}</Heading>
  <CopyToClipboard>
  {copied ? <span style={{color: 'red'}}>Copied.</span> : null)}
}

const InfoSection=({
lightBg，
imgStart，
背线，
...
}) => {
const[copy，setCopyStatus]=React.useState（false）
...
setCopyStatus（真）}>
{说明}
{复制？复制：null）}
}
谢谢，这项工作完美无瑕。你能告诉我怎么做吗？单击电子邮件id时，我希望显示小文本，上面写着“已复制”@DevangMukherjee您可以使用
CopyToClipboard
组件的
onCopy
道具来更改当前状态。在npm（）中有一个为您提供的解决方案的演示。我用
onCopy（）
问题更新了答案。您能看一下吗？
const InfoSection = ({
    lightBg,
    imgStart,
    topLine,
    ...
  }) => {

  const [copied, setCopyStatus] = React.useState(false)

  ...

  <CopyToClipboard text={description} onCopy={() => setCopyStatus(true)}>
   <Heading lightText={lightText}>{description}</Heading>
  <CopyToClipboard>
  {copied ? <span style={{color: 'red'}}>Copied.</span> : null)}
}