React分页仅提交第一页复选框值问题求助

分页组件仅会渲染当前页的DOM元素，非当前页的复选框并未挂载到页面中，所以通过document.getElementsByName只能获取到当前页的复选框节点，自然拿不到其他页的选中值。

React是数据驱动框架，应该通过状态维护所有选中项的集合，而不是直接操作DOM。

步骤1：初始化选中状态 #

假设你有完整的列表数据allItems，默认全选的话，初始状态设置为所有项的ID：

const [selectedItemIds, setSelectedItemIds] = useState(allItems.map(item => item.id));

步骤2：渲染分页列表的复选框 #

每个复选框的选中状态由selectedItemIds控制，切换选中状态时更新状态：

{currentPageItems.map(item => (
  <div key={item.id}>
    <input
      type="checkbox"
      name="items"
      value={item.id}
      checked={selectedItemIds.includes(item.id)}
      onChange={(e) => {
        const targetId = item.id;
        setSelectedItemIds(prev => {
          return e.target.checked
            ? [...prev, targetId]
            : prev.filter(id => id !== targetId);
        });
      }}
    />
    <span>{item.name}</span>
  </div>
))}

步骤3：提交时直接使用状态中的选中值 #

提交按钮的处理逻辑里，直接用selectedItemIds即可拿到所有选中项，不受当前分页影响：

const handleSubmit = () => {
  console.log('所有选中的项：', selectedItemIds);
  // 在这里执行提交逻辑，比如发送请求到后端
};

补充：批量全选/取消全选（可选） #

如果需要实现全选按钮，可以直接更新状态：

const toggleAll = () => {
  setSelectedItemIds(prev => {
    return prev.length === allItems.length
      ? []
      : allItems.map(item => item.id);
  });
};

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