如何获取可编辑动态表格的行数据并保存至State中

核心逻辑是数据驱动视图，不要等提交时再遍历DOM爬取单元格值，而是把表格行数据结构化存在State中，所有单元格内容从State取值，输入时实时同步回State，后续算总分、存数据库直接读State即可，避免DOM操作带来的取值不准、重渲染丢值问题。

具体实现步骤 #

• 第一步：定义结构化State
  拉取课程下的科目接口数据后，直接初始化State为数组格式，每一项对应一行数据，必须带唯一标识（比如科目ID），包含科目名、分数两个核心字段，不要存零散的独立状态。
• 第二步：受控渲染表格行
  不要硬编码写死<tr>节点，通过map遍历State数据动态生成行，每个可编辑单元格的值从对应行的State字段取，不要让contentEditable脱离管控直接修改DOM。
• 第三步：绑定输入事件实时更新State
  给每个可编辑单元格绑定onInput事件，触发时根据当前行的唯一ID、要更新的字段名，精准更新State中对应位置的值，不需要全量刷新整表数据。
• 第四步：基于State完成后续逻辑
  计算总分直接遍历State数组累加分数即可，提交持久化时直接把State数组传给后端接口，不需要额外操作DOM。

可直接复用的代码示例 #

import { useState, useEffect } from 'react'

export default function GradeEntryTable({ courseId }) {
  // 表格行数据State，单条结构：{ subjectId: 唯一科目ID, subjectName: 科目名, grade: 分数 }
  const [tableData, setTableData] = useState([])

  // 拉取指定课程的科目数据，初始化表格
  useEffect(() => {
    const loadSubjects = async () => {
      // 替换为你项目的实际接口请求逻辑
      const res = await fetch(`/api/course/${courseId}/subjects`)
      const subjectList = await res.json()
      setTableData(
        subjectList.map(subject => ({
          subjectId: subject.id,
          subjectName: subject.name,
          grade: subject.existGrade || ''
        }))
      )
    }
    loadSubjects()
  }, [courseId])

  // 通用单元格更新方法：根据行ID、字段名更新对应值
  const updateCellValue = (rowId, field, e) => {
    const inputVal = e.currentTarget.innerText.trim()
    setTableData(prev => 
      prev.map(row => row.subjectId === rowId ? { ...row, [field]: inputVal } : row)
    )
  }

  // 直接基于State计算总分
  const totalGrade = tableData.reduce((sum, row) => sum + (Number(row.grade) || 0), 0)

  // 提交数据持久化到数据库
  const saveGrade = async () => {
    // 可在这里加分数合法性校验，比如满分限制、非空校验
    await fetch(`/api/course/${courseId}/grade/save`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        gradeList: tableData,
        totalScore: totalGrade
      })
    })
  }

  return (
    <div>
      <table className="table-fill">
        <thead>
          <tr>
            <th className="text-left">Subjects</th>
            <th className="text-left">Grade</th>
          </tr>
        </thead>
        <tbody className="table-hover">
          {tableData.map(row => (
            <tr key={row.subjectId}>
              <td
                className="text-left"
                contentEditable="true"
                suppressContentEditableWarning
                onInput={e => updateCellValue(row.subjectId, 'subjectName', e)}
                dangerouslySetInnerHTML={{ __html: row.subjectName }}
              />
              <td
                className="text-left"
                contentEditable="true"
                suppressContentEditableWarning
                onInput={e => updateCellValue(row.subjectId, 'grade', e)}
                dangerouslySetInnerHTML={{ __html: row.grade }}
              />
            </tr>
          ))}
        </tbody>
      </table>
      <div style={{marginTop: 12}}>课程总得分：{totalGrade}</div>
      <button onClick={saveGrade} style={{marginTop: 12}}>保存成绩</button>
    </div>
  )
}

注意事项 #

• 不要用行索引作为map遍历的key，必须用科目唯一ID当key，否则动态增删行时会出现数据错位、输入串值的问题
• 如果是纯分数、短文本输入场景，建议把contentEditable单元格替换为受控input组件，稳定性比contentEditable高，不需要处理DOM innerText和重渲染的冲突问题
• 分数校验逻辑可以直接写在updateCellValue方法里，比如检测到输入非数字直接拦截，避免非法数据存入State

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