React剪贴板复制异常：循环渲染帖子点击按钮复制非目标内容

问题根源 #

你这问题出在重复使用了相同的ID。循环渲染多个<Post>组件时，每个组件里的<span id="cpnCode">和<button id="cpnBtn">都会生成完全一致的ID，而document.getElementById()只会抓取DOM中第一个匹配该ID的元素，所以不管点击哪个按钮，都只会操作第一个帖子的内容。另外，在React中直接操作原生DOM也不是推荐的做法，应该优先用React的状态和props来管理数据与交互。

修复方法 #

方法1：用状态+props，完全避免DOM操作 #

直接利用组件接收的post.coupon作为复制内容，用React状态管理按钮文字，既简单又符合React的设计思路：

import { useState } from 'react';

export default function Post({ post }) {
  const [btnText, setBtnText] = useState("COPY CODE");

  const copyCode = () => {
    navigator.clipboard.writeText(post.coupon);
    setBtnText("COPIED");
    setTimeout(() => {
      setBtnText("COPY CODE");
    }, 3000);
  }

  return (
    <div className="coupon">
      <div className="coupon-container">
        <div className="coupon-card">
          <div className="postInfo">
            {post.photo && <img className="postImg" src={post.photo} alt="" />}
            <div className="postTitle">
              <span>{post.shop}</span>
            </div>
            <div className="postTitle">
              <span>{post.title}</span>
            </div>
            <div className="coupon-row">
              <span>{post.coupon}</span>
              <button onClick={copyCode}>{btnText}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

方法2：用ref（必须操作DOM时使用） #

如果确实需要直接操作DOM元素，用React的useRef可以让每个组件实例拥有独立的引用，避免冲突：

import { useRef, useState } from 'react';

export default function Post({ post }) {
  const [btnText, setBtnText] = useState("COPY CODE");
  const codeRef = useRef(null);

  const copyCode = () => {
    if (codeRef.current) {
      navigator.clipboard.writeText(codeRef.current.innerHTML);
      setBtnText("COPIED");
      setTimeout(() => {
        setBtnText("COPY CODE");
      }, 3000);
    }
  }

  return (
    <div className="coupon">
      <div className="coupon-container">
        <div className="coupon-card">
          <div className="postInfo">
            {post.photo && <img className="postImg" src={post.photo} alt="" />}
            <div className="postTitle">
              <span>{post.shop}</span>
            </div>
            <div className="postTitle">
              <span>{post.title}</span>
            </div>
            <div className="coupon-row">
              <span ref={codeRef}>{post.coupon}</span>
              <button onClick={copyCode}>{btnText}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

另外，在<Posts>组件循环渲染时，记得给每个<Post>添加唯一的key属性，这是React的基础规范，能避免不必要的渲染异常：

export default function Posts({ posts }) {
  return (
    <div className="posts">
      {posts.map((p) => (
        <Post key={p.id} post={p} />
      ))}
    </div>
  );
}

关键点总结 #

• DOM中的ID必须全局唯一，循环渲染的组件绝对不能使用重复ID
• React开发中优先用状态和props管理数据与交互，尽量减少原生DOM操作
• 循环渲染组件时务必添加唯一的key属性

内容的提问来源于stack exchange，提问作者sultan.h