我如何使用ReactJS按钮复制文本

Question

您好，我有一个数组，当我单击按钮时，我想复制 p 元素中的文本（{item.adress}=> 它是一个数组项）。你能帮我吗？

import classes from './CryptoBox.module.css'


 const CryptoBox = (props) => {
  let item = props.item     
    
    return(
         <div className={classes.box}>
             {item.map(item => (
                <div className={classes.boxx} key={Math.random().toString(36).slice(2)}>
                    <img src={item.img} alt={item.id}/><br/>
                    <p id={item.adress} hidden>{item.adress}</p>
                    <span>
                        <button onClick={}> 
                            {props.link}
                        </button>
                    </span>
                </div> 
             ))}
         </div>
     )
 }

 export default CryptoBox;

Answer 1

受到这个答案的启发，但可能有一些优化方法。如果你想复制到剪贴板：

const CryptoBox = (props) => {
  let item = props.item;
     
  const copyValue = (val) => {
    // Create a "hidden" input
    var aux = document.createElement("input");

    // Assign it the value of the specified element
    aux.setAttribute("value", val);

    // Append it to the body
    document.body.appendChild(aux);

    // Highlight its content
    aux.select();

    // Copy the highlighted text
    document.execCommand("copy");

    // Remove it from the body
    document.body.removeChild(aux);
  };

    
    return(
         <div className={classes.box}>
             {item.map(item => (
                <div className={classes.boxx} key={Math.random().toString(36).slice(2)}>
                    <img src={item.img} alt={item.id}/><br/>
                    <p id={item.adress} hidden>{item.adress}</p>
                    <button onClick={() => copyValue(item.adress)}>
                       {props.link}
                    </button>
                
                </div> 
             ))}
         </div>
     )
 }

 export default CryptoBox;

Answer 2

您需要 p 标签吗？因为如果你想复制到剪贴板，你只需要在按钮中执行类似的操作

<button onClick={() => navigator.clipboard.writeText(item.adress)}>
  {item.link}
</button>

p 标签对于复制到剪贴板来说不是必需的，因为你实际上拥有 item.address 的值你正在映射，这样你就可以传递它，而不是通过 dom 来查找为用户隐藏的 p 标签。

Answer 3

由于我希望您希望根据代码隐藏该段落，因此您可以在 onClick 函数中使用“console.log”来输出您单击的项目的 item.address 。就像下面这样：

<button onClick={console.log()}> 
      {props.link}
</button>