React JS中checkbox onChange事件不触发及选中状态处理

问题排查与修复点 #

1. Checkbox onChange事件不触发问题 #

• 事件未绑定：当前Checkbox的onChange属性写的是临时打印日志的箭头函数，预先写的handleChange方法根本没有绑定到组件上，自然不会执行选择逻辑
• 列表Key绑定错误：遍历权限列表时用了空Fragment<>...</>作为外层节点，把key属性绑在了内层div上，React虚拟DOM比对时会出现事件绑定丢失、状态错位的问题
• 变量作用域错误：用来暂存权限列表的list变量声明在组件顶层，每次组件重渲染都会被重置为空数组，会导致状态更新后列表数据被意外覆盖
• 冗余组件包裹：外层加了Suspense组件但没有搭配动态懒加载逻辑，部分第三方UI库的Input组件在Suspense边界下会出现事件冒泡异常

2. 后端已选权限初始化逻辑实现 #

• 拉取全量权限列表时，同步请求获取当前角色已绑定的权限名称数组
• 遍历全量权限生成列表数据时，直接判断当前权限是否存在于已选权限数组中，初始化isChecked字段，不需要后续二次遍历处理
• 表单提交时，直接从authorities状态中过滤出isChecked为true的项，提取权限名组成数组传给后端即可
• 点击权限对应的label标签时要能触发选中，需要给Input加对应id，和label的htmlFor属性匹配

修复后完整代码 #

import { useState, useEffect } from 'react';
// 此处保留原有组件引入：Card、Form、Input、Button、Breadcrumb、Container、MetaTags等

export default function ActionRolesPage(props) {
  const [authorities, setAuthorities] = useState([]);
  const [name, setName] = useState("");

  useEffect(() => {
    getAuthorities();
  }, []);

  const getAuthorities = async () => {
    try {
      // 新增角色场景不需要拉已选权限，直接把checkedAuthList设为空数组即可
      // 编辑角色场景可通过Promise.all同时拉取全量权限和当前角色已绑定权限
      const allAuthRes = await doGetAllAuthorities()
      const allAuthList = getValidatedData(allAuthRes.data, "array");
      // 替换为后端返回的当前角色已选权限数组，新增场景默认传[]
      const checkedAuthList = [] 
      
      // list变量移到方法内部声明，避免重渲染污染
      const list = allAuthList.map(authName => ({
        authority: authName,
        isChecked: checkedAuthList.includes(authName)
      }))
      setAuthorities(list);
    } catch (e) {
      console.log(e);
    }
  }

  const handleChange = (e) => {
    const { name, checked } = e.target
    // 用函数式更新避免闭包拿到旧状态
    setAuthorities(prev => prev.map(item => 
      item.authority === name ? { ...item, isChecked: checked } : item
    ));
  }

  // 补全原代码缺失的表单提交方法
  const handleSubmit = (e) => {
    e.preventDefault();
    const checkedAuths = authorities.filter(item => item.isChecked).map(item => item.authority);
    // 此处写提交后端逻辑，传参包含角色名name和选中权限列表checkedAuths即可
    console.log("提交数据：", { name, authorities: checkedAuths })
  }

  return (
    <>
      <div className="page-content">
        <MetaTags>
          <title>Add Role | IG One</title>
        </MetaTags>
        <Container fluid>
          <Breadcrumb
            title="Add Role"
            breadcrumbItems={[{ title: "Settings" }, { title: "Roles" }, { title: "Add" }]}
          />
          <Form onSubmit={handleSubmit}>
            <Card>
              <CardBody>
                <Row className="mb-3">
                  <label
                    htmlFor="role-name-input"
                    className="col-md-2 col-form-label"
                  >
                    Name
                  </label>
                  <div className="col-md-8 mx-0">
                    <Input
                      id="role-name-input"
                      className="form-control"
                      type="text"
                      name="name"
                      required
                      value={name}
                      onChange={(e) => setName(e.target.value)}
                      placeholder="请输入角色名称"
                    />
                  </div>
                </Row>
                <br/>
                <br/>
                <Row className="mb-3">
                  <CardTitle>
                    Authorities
                  </CardTitle>
                  <div className="col-md-2">
                    {
                      authorities.map((data) => (
                        // key直接绑在最外层div，用唯一权限名替代index，去掉多余空Fragment
                        <div key={data.authority} style={{ display: "flex" }}>
                          <div className='col-md-10 mx-0 mt-2'>
                            <Input 
                              type={"checkbox"}
                              id={data.authority}
                              checked={data?.isChecked || false}
                              name={data.authority}
                              // 绑定正确的handleChange方法
                              onChange={handleChange}
                              className="form-control"
                              style={{ cursor: "pointer", paddingLeft: "1rem" }}
                            />
                          </div>
                          <div>
                            <label style={{ cursor: "pointer" }} htmlFor={data.authority} className="col-md-50 col-form-label"> 
                              {data.authority}
                            </label>
                          </div>
                        </div>
                      )) 
                    }
                  </div>
                </Row>
                <Row className="d-flex justify-content-center mt-4">
                  <Button color="dark" type='submit' className="btn-xs" style={{ width: "40%", cursor: "pointer" }}>
                    Add Role
                  </Button>
                </Row>
              </CardBody>
            </Card>
          </Form>
        </Container>
      </div>
    </>
  )
} 

编辑已有角色场景时，只需要传入对应角色id，拉取该角色已绑定的权限列表替换checkedAuthList的默认空数组即可，选中状态会自动初始化。

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