如何让checkbox按API返回的角色数据默认勾选且支持交互修改状态

实现步骤 #

1. 新增状态存储当前选中的角色ID集合
   首先声明一个state存储选中的角色ID，方便后续判断勾选状态和收集提交数据：

import { useState, useEffect } from 'react'

// 存储选中的角色ID
const [selectedRoleIds, setSelectedRoleIds] = useState([])
// 假设接口返回的默认勾选角色存在变量 defaultRoles 中

2. 接口数据返回后初始化默认选中状态
   在拿到全量角色列表和默认勾选角色数据后，初始化选中状态：

useEffect(() => {
  // 两个接口数据都返回后再初始化
  if (!allRoles?.length || !defaultRoles?.length) return
  // 提取默认勾选的角色ID数组
  const initSelectedIds = defaultRoles.map(role => role.id)
  setSelectedRoleIds(initSelectedIds)
}, [allRoles, defaultRoles])

3. 实现勾选状态切换方法

const onChangeChecked = (e) => {
  const currentRoleId = Number(e.target.name)
  setSelectedRoleIds(prevSelected => {
    // 已选中则移除，未选中则新增
    return prevSelected.includes(currentRoleId)
      ? prevSelected.filter(id => id !== currentRoleId)
      : [...prevSelected, currentRoleId]
  })
}

4. 修改渲染代码，绑定checked属性，修复原有语法错误
   原有代码存在三个问题：map遍历未加唯一key属性、input标签重复声明name属性、React中class属性要写为className，修复后代码如下：

<dt>
  <label className="mb-2">Roles</label>
  {allRoles.map(role => {
    return (
      <div key={role.id}>
        <label className="new-control new-checkbox checkbox-primary">
          <input
            name={role.id}
            type="checkbox"
            className="new-control-input"
            checked={selectedRoleIds.includes(role.id)}
            onChange={onChangeChecked}
          />
          <span className="ml-2 new-control-indicator">{role.name}</span>
        </label>
      </div>
    )
  })}
</dt>

后续提交数据时，直接取selectedRoleIds即可拿到当前用户选中的所有角色ID。

内容的提问来源于stack exchange，提问作者Paul Nuñez