Javascript 反应--复制到剪贴板--按钮

我在一个隔间里有这样的东西

  <div className="generated-voucher-code-details">
                <p>Your voucher Code is <span style={{color:'#000000', fontWeight:'500'}}>“X1X1X1“</span>.</p>
                <p>To know more on how to redeem the gift card visit the link <span style={{color:'#C7417B'}}>stores.com</span></p>
                <p>Choose Preferred date, Time, Number of People and Book Now.</p>
                <p>Apply voucher code in Have a Xoxo Voucher Check Box.</p>
                <p>Pay Extra Amount if any through other mode of payments.</p>
                <p>Your order is successfully placed.</p>
                <p>You will receive confirmation within 24 hours.</p>
  </div>

您的凭证代码为“X1X1”

要了解有关如何兑换礼品卡的更多信息，请访问linkstores.com

选择首选日期、时间、人数和立即预订

在“拥有Xoxo凭证”复选框中应用凭证代码

通过其他付款方式支付额外金额（如有）

您的订单已成功下单

您将在24小时内收到确认

这个Div在一个框中假设，在这个框下面，我有一个按钮

---

现在，当我们单击此按钮时，如何复制整个文本？

欢迎使用堆栈溢出

请检查下面的工作代码示例

import React, { useRef } from 'react';

export default function () {
   const divRef = useRef();
   const copyToCB = () => {
    const div = document.createRange();

    div.setStartBefore(divRef.current);
    div.setEndAfter(divRef.current);
    window.getSelection().empty();
    window.getSelection().addRange(div);
    document.execCommand('copy')
}
return (
    <>
        <div className="generated-voucher-code-details" ref={divRef}>
            <p>Your voucher Code is <span style={{ color: '#000000', fontWeight: '500' }}>“X1X1X1“</span>.</p>
            <p>To know more on how to redeem the gift card visit the link <span style={{ color: '#C7417B' }}>stores.com</span></p>
            <p>Choose Preferred date, Time, Number of People and Book Now.</p>
            <p>Apply voucher code in Have a Xoxo Voucher Check Box.</p>
            <p>Pay Extra Amount if any through other mode of payments.</p>
            <p>Your order is successfully placed.</p>
            <p>You will receive confirmation within 24 hours.</p>
        </div>
        <button onClick={copyToCB}>Copy to CB</button>
    </>
)
}

import React，{useRef}来自“React”；
导出默认函数（）{
const divRef=useRef（）；
常量copyToCB=（）=>{
const div=document.createRange（）；
div.setStartBefore（divRef.current）；
div.setEndAfter（divRef.current）；
window.getSelection（）.empty（）；
window.getSelection（）.addRange（div）；
document.execCommand（'copy'）
}
返回(
您的凭证代码为“X1X1”

要了解有关如何兑换礼品卡的更多信息，请访问linkstores.com

选择首选日期、时间、人数和立即预订

在“拥有Xoxo凭证”复选框中应用凭证代码

通过其他付款方式支付额外金额（如有）

您的订单已成功下单

您将在24小时内收到确认

抄送CB
)
}

---

多亏了您可以使用

document.execCommand（“copy”）

来实现它

---

有关更多详细信息，请转到此处。

Copy Text onCopy=（）=>{this.setState（{Copy:true}）；}；请通过编辑将您的评论放入您的问题中。