React中插入DOM元素后执行JavaScript，如何实现点击按钮复制视频ID？

有两种可行的实现思路，第一种是直接适配你当前的原生DOM操作写法做最小改动，第二种是改用符合React开发规范的声明式写法，更推荐后者。

方案1：最小改动适配现有代码 #

你可以在创建按钮时直接给它绑定原生点击事件，同时将视频ID存在按钮的自定义属性中，点击时读取即可，修改你的forEach循环逻辑如下：

data.forEach((video) => {
  const div = document.createElement("div");
  div.classList.add("searched-video");
  div.innerHTML = `
  <img src="${video.thumbnail.thumbnails[0].url}">
  <h3>${video.title}</h3>
  <button>Copy Link</button>
  `;
  // 新增逻辑：绑定复制事件
  const copyBtn = div.querySelector('button');
  // 存储视频ID到按钮的自定义属性
  copyBtn.dataset.videoId = video.id;
  copyBtn.addEventListener('click', () => {
    const targetId = copyBtn.dataset.videoId;
    // 调用剪贴板API复制ID
    navigator.clipboard.writeText(targetId)
      .then(() => {
        // 可选：添加复制成功提示
        copyBtn.textContent = '已复制';
        setTimeout(() => copyBtn.textContent = 'Copy Link', 2000);
      })
      .catch(err => console.error('复制失败：', err))
  })
  videosList.appendChild(div);
});

方案2：改用React声明式写法（更推荐） #

你当前的写法绕过了React状态驱动DOM的机制，容易出现状态不同步、内存泄露等问题，更推荐用React状态存储返回的视频列表，直接在JSX中绑定事件，实现步骤如下：

1. 新增存储视频列表的状态

const [videos, setVideos] = useState([]);

2. 修改请求逻辑，拿到数据后直接更新状态，删除所有原生DOM操作代码

const handleSearchSubmit = (e) => {
  e.preventDefault();
  setIsPending(true);
  setError("");
  setVideos([]); // 清空之前的搜索结果

  fetch(`http://localhost:8000/api?video=${searchTerm}`, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
  })
    .then((response) => response.json())
    .then((data) => {
      setVideos(data); // 直接更新状态
      setIsPending(false);
    });
};

3. 在组件的JSX部分直接遍历状态渲染视频列表，绑定onClick事件

<div id="videos">
  {videos.map(video => (
    <div key={video.id} className="searched-video">
      <img src={video.thumbnail.thumbnails[0].url} alt={video.title} />
      <h3>{video.title}</h3>
      <button onClick={async () => {
        try {
          await navigator.clipboard.writeText(video.id);
          // 可自行添加复制成功的交互提示
        } catch (err) {
          console.error('复制失败：', err)
        }
      }}>Copy Link</button>
    </div>
  ))}
</div>

内容的提问来源于stack exchange，提问作者user15499983