React中选中父复选框时自动勾选所有嵌套子选项如何实现

核心调整点 #

• 修正原代码中event.target.isSelected的错误写法：原生checkbox的选中属性为event.target.checked
• 点击父级复选框时，同步更新其所有嵌套子级的选中状态
• 推荐用唯一id作为状态存储的key，避免name重复导致的冲突

完整调整后代码 #

状态与事件处理逻辑 #

// 存储所有复选框的选中状态，key为id，value为选中状态
const [isSelected, setIsSelected] = useState<Record<number | string, boolean>>({});

/**
 * 复选框选中事件处理
 * @param id 当前点击的复选框对应数据的id
 * @param event 复选框change事件
 * @param childList 可选参数，父级对应子成员数组，传参代表当前点击的是父级复选框
 */
const handleCheck = (
  id: number | string, 
  event: React.ChangeEvent<HTMLInputElement>,
  childList?: Array<{id: number | string, name: string}>
): void => {
  const currentChecked = event.target.checked;
  const newSelectedState = {...isSelected, [id]: currentChecked};

  // 点击父级时同步更新所有子级的选中状态
  if (childList) {
    childList.forEach(child => {
      newSelectedState[child.id] = currentChecked;
    })
  }

  setIsSelected(newSelectedState);
};

渲染层示例 #

{
  data.map(parentItem => (
    <div key={parentItem.id}>
      {/* 父级复选框 */}
      <input 
        type="checkbox" 
        checked={!!isSelected[parentItem.id]}
        onChange={(e) => handleCheck(parentItem.id, e, parentItem.familyMembers)}
      />
      <span>{parentItem.name}</span>
      {/* 嵌套子级复选框 */}
      <div style={{paddingLeft: 24}}>
        {
          parentItem.familyMembers.map(childItem => (
            <div key={childItem.id}>
              <input 
                type="checkbox" 
                checked={!!isSelected[childItem.id]}
                onChange={(e) => handleCheck(childItem.id, e)}
              />
              <span>{childItem.name}</span>
            </div>
          ))
        }
      </div>
    </div>
  ))
}

可选扩展功能（子级联动父级） #

如果需要实现子级全选时自动勾选父级、子级部分选中时父级显示半选状态，可修改父级复选框逻辑：

const isAllChildChecked = parentItem.familyMembers.every(child => isSelected[child.id]);
const isPartChildChecked = parentItem.familyMembers.some(child => isSelected[child.id]) && !isAllChildChecked;

<input
  type="checkbox"
  checked={isAllChildChecked}
  ref={el => el && (el.indeterminate = isPartChildChecked)}
  onChange={(e) => handleCheck(parentItem.id, e, parentItem.familyMembers)}
/>

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