Reactjs 无法在react 中向表中添加行

发布于05月30日

我有一个react 组件.在useEffect中，我try 创建一个新行并将该行添加到表中.我试着用insertRow，但也不起作用.该元素确实存在，并且我能够向其添加mousedown侦听器.

const createRow = () => {
  const row = document.createElement("tr");
  for (let j = 0; j < 3; j++) {
    const td = document.createElement("td");
    row.appendChild(td);
  }
  return row;
};

useEffect(() => {
  if (id !== "-1") {
    const element = document.getElementById(id);
    element?.addEventListener("mousedown", () => {
      console.log("here");
    });

    const row = createRow();
    element?.append(row); // also tried appendChild
   // yes there should be a removeEventListener, but this is just to debug
  }
}, [id]);

推荐答案

您的createRow函数运行良好，问题是您正在创建三个td，并将它们附加到所创建的tr中，但这三个td是空的，因此该函数返回以下内容:

<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>

这是一个包含三个空表数据的表行，这就是无法观察到它的原因，因此使用相同的逻辑，您必须将文本附加到您的td:

const createRow = () => {
    const row = document.createElement("tr");
    for (let j = 0; j < 3; j++) {
      const td = document.createElement("td");
       // add these two lines
      const content = document.createTextNode("Test");
      td.appendChild(content);
      row.appendChild(td);
    }
    return row;
  };

这将产生以下结果:

<tr>
  <td>Test</td>
  <td>Test</td>
  <td>Test</td>
</tr>

Note:这是普通的Java脚本，如果您使用的是Reaction，建议您使用ref来操作DOM元素，而不是通过id获取它们

Reactjs相关问答推荐

导致类型错误的调度不是函数"；

NextJS(AppRouter)、Apollo(客户端)，在根布局中使用ApolloProvider时出错

单击按钮时在子元素中不显示任何内容-react

值在返回页面时不更新，即使我已经更新了它们

基本react 应用程序正在触发两次Use Effect

获取未捕获的错误：Gatsby生产版本上的最小化react 错误#418

如何通过reactjs正确显示记录

如何优化 React 应用程序的性能？

React router v5 仅在生产中不适用于嵌套路由

Next.js 和理智｜ npm run build 时预渲染页面/时发生错误

React中的功能性组件克隆优化

如何到达类组件中的状态？

我刚刚部署了我的 Vite React 站点，但我的图标/图像没有部署

自动重新获取不起作用 - RTK 查询

父状态改变后子组件丢失状态

如何定制 React 热 toastr ？

如何跨微前端 React 应用管理状态管理？

链接的音译 Gatsby JS

bootstrap 导航栏切换器在 reactjs 中不起作用

react / firebase 基地.如何在我的项目中保存更新的数据？

实用课程推荐