无法使用复制到剪贴板反应 JS

Question

在我有电子邮件 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>
    )
}

由于这是可重用组件的一部分，因此我使用了在单独文件中定义的 lightText 和 darkText 之类的东西，以便于重用。

我正在从一个看起来像这样的 data.js 文件传递​​数据，

export const homeObjThree = {
    id: 'experience',
    lightBg: false,
    lightText: true,
    lightTextDesc: true,
    topLine: 'Contact Me',
    headLine: 'you can reach out to me at:' ,
    description:'devangmukherjee@gmail.com',
    headLine2: 'Or simply just drop by a hello :)',
    imgStart: false,
    img: experience,
    alt: 'alt line does not always have to boring',
    dark: true,
    primary: true,
    darkText: true,
  };

我传递的 description 是电子邮件 ID，这是我唯一想要复制的内容。

Heading 的样式组件看起来像这样

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;
  }
`;

如何使它看起来像一个链接？可能当人们将鼠标悬停在它下划线的文本上并且当他们单击它时，文本会被复制并复制它所复制的文本。

我试图通过 - In reactJS, how to copy text to clipboard? 完成这项工作

但它没有用。请帮忙。

更新：对于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>
    )
}

错误'state' is not defined no-undef

我如何在这里定义状态？

Answer 1

如果你想使用react-copy-to-clipboard库，

你应该像这样包裹Heading：

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

...

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

关于使文本看起来像一个链接， 您可以将此 css 添加到 Heading:

cursor: pointer;

&:hover {
  text-decoration: underline;
}

编辑：

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

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)}
}