插入元素后在 React 中运行 Javascript答案

【问题标题】：Run Javascript in React after inserting elements插入元素后在 React 中运行 Javascript
【发布时间】：2021-12-31 00:29:09
【问题描述】：

我对 React 有点陌生，我正在尝试创建一个网站，该网站使用 fetch 向我的服务器发出请求，该网站将返回与用户搜索内容相关的 youtube 视频，然后它将内容添加到 DOM 中。

我现在的做法是这样的：

const handleSearchSubmit = (e) => {
    e.preventDefault();
    const videosList = document.getElementById("videos");
    videosList.innerHTML = "";
    setIsPending(true);
    setError("");

    fetch(`http://localhost:8000/api?video=${searchTerm}`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        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>
          `;
          videosList.appendChild(div);
        });
        // console.log(data);
        setIsPending(false);
      });
  };

我想这样做，当用户单击“复制链接”按钮复制存储在 video.id 中的视频 ID 但我无法向按钮添加“onclick = {}”属性时我将如何运行代码？

有什么想法吗？

【问题讨论】：

您正在寻找的是 JavaScript 中的剪贴板 API。 developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
@Martin 问题不在于如何复制到剪贴板，问题是我无法向按钮添加 onclick={} 属性，那么当用户单击按钮时如何运行一些代码？
使用 react 时，尽可能避免直接与 DOM 交互。你可以使用 react/jsx 来做到这一点。这应该对你有很大帮助。查看有关 fetch 的示例。 reactjs.org/docs/faq-ajax.html
创建一个使用数据对象的 useState() 钩子，而不是让 fetch 构造您的 HTML 结构等。让 fetch 控制挂起状态。然后进行条件渲染，通过数据对象进行映射。您将能够像往常一样附加点击处理程序等。
大卫基本上在这里提供了我之前评论的一个例子。

标签： javascript reactjs react-hooks jsx

【解决方案1】：

在 react 中，像这样手动操作 DOM 是一个非常糟糕的主意。您几乎不应该使用 getElementById、createElement、appendChild 之类的东西。

您可能想要做的是为您的视频设置一个状态，然后您可以通过适当的反应组件呈现该列表。这也使得处理您的onClick 事件更容易。根据您的代码，这是一个大概的样子：

const MyElement = () => {
  const [videos, setVideos] = useState([]);
  const getVideos = e => {
    fetch(`http://localhost:8000/api?video=${searchTerm}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then(response => {
        return response.json();
      })
      .then(data => {
        setVideos(data);
      });
  };
  const copyLink = (e, video) => {
    // code to copy link from video
  };
  return (
    <>
      <button onClick={getVideos}>Click to fetch</button>
      {videos.map(video => (
        <div className="searched-video">
          <img src={video.thumbnail.thumbnails[0].url}/>
          <h3>{video.title}</h3>
          <button onClick={e=> copyLink(e, video)}>Copy Link</button>
        </div>
      ))}
    </>
  );
};

【讨论】：