React中如何使用useState Hook获取所有复选框状态与笔记内容

你当前的代码通过DOM操作实现了需求，但不符合React的状态驱动理念。改用useState管理状态的核心是把每一行的复选框状态、笔记内容都维护在组件状态中，表单元素的变化直接更新状态，提交时直接从状态提取数据即可。

实现步骤与代码示例 #

1. 初始化状态

用useState创建一个数组状态，对应每一行的检查项数据，初始值基于InspectionList的长度生成：

import { useState } from 'react';

// 假设InspectionList是你的检查项列表
// const InspectionList = [/* 你的检查项数据 */];

function YourComponent() {
  // 初始化状态：每个项包含id、isChecked（复选框状态）、notes（笔记内容）
  const [inspectionRows, setInspectionRows] = useState(() => 
    InspectionList.map((_, index) => ({
      id: index + 1, // 和原逻辑保持一致，id从1开始
      isChecked: false,
      notes: ''
    }))
  );
  const [errId, setErrId] = useState<string[]>([]);
  const [insData, setInsData] = useState<typeof inspectionRows>([]);

2. 绑定表单元素的 onChange 事件

渲染复选框和笔记输入框时，绑定onChange事件，实时更新对应行的状态：

return (
    <form onSubmit={handleEditFormSubmit}>
      {inspectionRows.map(row => (
        <div key={row.id}>
          <input
            type="checkbox"
            checked={row.isChecked}
            onChange={(e) => {
              // 更新对应行的复选框状态
              setInspectionRows(prev => prev.map(item => 
                item.id === row.id 
                  ? {...item, isChecked: e.target.checked} 
                  : item
              ));
            }}
          />
          <input
            type="text"
            value={row.notes}
            onChange={(e) => {
              // 更新对应行的笔记内容
              setInspectionRows(prev => prev.map(item => 
                item.id === row.id 
                  ? {...item, notes: e.target.value} 
                  : item
              ));
            }}
          />
        </div>
      ))}
      <button type="submit">提交</button>
    </form>
  );

3. 重写提交处理函数

提交时直接从inspectionRows状态获取数据，不需要操作DOM，同时保留你的校验逻辑：

function handleEditFormSubmit(e: React.FormEvent) {
    e.preventDefault();
    const errids: string[] = [];

    // 遍历状态数据，做校验并整理提交数据
    const data = inspectionRows.map(row => {
      const { id, isChecked, notes } = row;
      if (!isChecked && !notes) {
        errids.push(`notes_${id}`); // 和原错误ID格式保持一致
      }
      return {
        id,
        is_checked: isChecked,
        notes
      };
    });

    setErrId(errids);
    setInsData(data);
  }
}

核心优势 #

• 完全符合React的状态驱动视图理念，避免直接操作DOM带来的副作用
• 状态变化由React自动追踪，渲染更可靠，不会出现DOM与状态不一致的问题
• 代码逻辑更清晰，数据流向可追踪

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