React中复选框绑定对象提交仅返回[object Object]的解决方法

我通过map遍历对象数组生成复选框，将复选框的value设为对应对象，代码如下：

{alltasks.map((task) => (
  <div key={task.task}>
      <input type="checkbox" name="task" id={task.task} value={task} className="hidden peer check" />
      <label for={task.task} className="inline-flex items-center justify-between w-full p-5 text-white bg-transparent border-2 border-slate-600 rounded-lg cursor-pointer peer-checked:border-emerald-500 hover:border-emerald-700">                           
          <div>
              <img src={task.img} alt="" />
              
              <div className="w-full text-sm mt-2">ID: {task.task}</div>
          </div>
      </label>
  </div>
))}

表单提交时尝试获取选中复选框的value，代码如下：

<form className="w-full taskForm" onSubmit={(e) => {
    e.preventDefault()
    const checkedBoxes = document.querySelectorAll('input[name=task]:checked');
    checkedBoxes.forEach((box) => {
        console.log(box.value)
    })
    stateChanger(false)
}}>

但控制台仅输出[object Object]，无法拿到真实的对象，请问该如何解决？

原因分析 #

HTML的input元素value属性仅支持字符串类型。当你直接把JS对象赋值给value时，浏览器会自动调用对象的toString()方法，最终得到的就是[object Object]，自然无法还原原始对象。

解决方案 #

方案一：用React状态跟踪选中项（推荐，符合React数据流） #

在组件中维护一个状态来记录选中的任务，不需要从DOM中读取值：

1. 初始化选中状态：

import { useState } from 'react';

const YourComponent = () => {
  const [selectedTasks, setSelectedTasks] = useState([]);
  // ... 其他逻辑
}

2. 修改复选框，添加checked状态和onChange事件：

{alltasks.map((task) => (
  <div key={task.task}>
      <input 
        type="checkbox" 
        name="task" 
        id={task.task} 
        checked={selectedTasks.includes(task)}
        onChange={(e) => {
          if (e.target.checked) {
            // 选中时添加到数组
            setSelectedTasks([...selectedTasks, task]);
          } else {
            // 取消选中时移除
            setSelectedTasks(selectedTasks.filter(t => t.task !== task.task));
          }
        }}
        className="hidden peer check" 
      />
      <label for={task.task} className="inline-flex items-center justify-between w-full p-5 text-white bg-transparent border-2 border-slate-600 rounded-lg cursor-pointer peer-checked:border-emerald-500 hover:border-emerald-700">                           
          <div>
              <img src={task.img} alt="" />
              
              <div className="w-full text-sm mt-2">ID: {task.task}</div>
          </div>
      </label>
  </div>
))}

3. 提交时直接使用selectedTasks：

<form className="w-full taskForm" onSubmit={(e) => {
  e.preventDefault()
  console.log(selectedTasks); // 这里就是选中的原始对象数组
  stateChanger(false)
}}>

方案二：通过唯一标识关联原始对象 #

如果不想用状态跟踪，可以把复选框的value设为对象的唯一标识（比如task.task），提交时再从原数组中筛选对应对象：

1. 修改复选框的value为唯一ID：

<input 
  type="checkbox" 
  name="task" 
  id={task.task} 
  value={task.task} 
  className="hidden peer check" 
/>

2. 提交时筛选对象：

<form className="w-full taskForm" onSubmit={(e) => {
  e.preventDefault()
  // 获取所有选中的ID
  const checkedIds = Array.from(document.querySelectorAll('input[name=task]:checked'))
    .map(box => box.value);
  // 从原数组中筛选出对应对象
  const selectedTasks = alltasks.filter(task => checkedIds.includes(task.task));
  console.log(selectedTasks); // 得到选中的原始对象数组
  stateChanger(false)
}}>

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