使用React JS为每行动态生成checkbox并获取选中值的实现问题

安全阿岳

2026-9-29

解决步骤

1. 调整行数据初始结构

每行新增dependent字段，默认值为空字符串，用于存储选中的依赖项：

// 新增行逻辑修改
const addRow = () => {
  setRows([
    ...rows,
    {
      input1: '', // 第一个输入项对应字段
      input2: '', // 第二个输入项对应字段
      dependent: ''
    }
  ])
}

2. 实现checkbox选中状态同步函数

编写专门的change处理函数，操作选中值拼接到对应行的dependent字段：

const handleCheckboxChange = (rowIndex, checkValue, isChecked) => {
  const updatedRows = [...rows];
  // 把现有依赖转成数组方便操作
  const depList = updatedRows[rowIndex].dependent ? updatedRows[rowIndex].dependent.split(',') : [];

  if (isChecked) {
    // 选中时追加值，做去重避免重复提交
    if (!depList.includes(checkValue)) {
      depList.push(checkValue);
    }
  } else {
    // 取消选中时移除对应值
    depList.splice(depList.indexOf(checkValue), 1);
  }

  // 转成逗号分隔字符串存回对应行
  updatedRows[rowIndex].dependent = depList.join(',');
  setRows(updatedRows);
}

3. 绑定checkbox的事件和回显逻辑

渲染每行checkbox的时候，绑定上述事件，同时增加选中状态回显：

{/* 渲染第i行的checkbox逻辑 */}
{Array.from({length: i}, (_, k) => (
  <label key={k} style={{marginRight: '8px'}}>
    <input
      type="checkbox"
      value={k + 1}
      onChange={(e) => handleCheckboxChange(i, e.target.value, e.target.checked)}
      checked={rows[i].dependent?.split(',').includes(String(k + 1)) || false}
    />
    checkbox {k + 1}
  </label>
))}