Javascript 单击时使用css类设置活动状态

我的应用程序中有一个复选框列表

import React，{useState}来自“React”；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{复选框，行，列}；
常数项=[
{
价值：“A”，
标签：“A”
},
{
值：“B”，
标签：“B”
},
{
值：“C”，
标签：“C”
},
{
值：“D”，
标签：“D”
},
{
价值：“E”，
标签：“E”
}
];
常数测试=（）=>{
const[actives，setActives]=useState（[“A”，“C”]）；
函数onChange（checkedValues）{
console.log（“checked=”，checkedValues）；
设置活动（检查值）；
}
返回(
{items.map（（i）=>{
返回(
{i.label}
);
})}
);
};您的代码沙盒看起来唯一的问题是，当第一次单击任何复选框时，先前的状态（“A”和“C”已选中）被忽略-因此仅选中已单击的复选框（无论是否最初选中），而所有其他复选框都将被取消选中

在那之后，一切都按我想象的那样进行

这个错误的原因很简单，就是你的
actives
状态和组中哪些复选框在内部被认为是选中的之间存在差异。您的代码使用
actives
来确定CSS类，而不是检查内容的初始状态-因此
checkedValues
开始时为空

修复很简单，将
值
道具传递给复选框组组件，如文档所示。您的
actives
格式已经正确，因此只需添加prop
value={actives}
即可解决问题。
我认为您忘记为复选框组指定初始值，如下所示：

<Checkbox.Group style={{ width: "100%" }} onChange={onChange} value={actives}>

您能否详细说明“当用户选择其他复选框而不是这些活动复选框时，活动复选框不必像现在一样被禁用。”活动复选框不会被选中？我更改了代码，并将其包装到表单中，但它不起作用，您能帮我吗？您需要将其包装在other
中您知道一种改变react中状态的解决方案吗？比较这些值或类似的东西？因为在我的申请表中有点不对劲。谢谢你能帮忙吗？价值不起作用
const Test = () => {
  const [actives, setActives] = useState(["A", "C"]);
  const [checkAll, setCheckAll] = React.useState(false);

  function onChange(checkedValues) {
    console.log("checked = ", checkedValues);
    setActives(checkedValues);
  }
  const onCheckAllChange = e => {
    setActives(e.target.checked ? items.map(option => option.value) : []);
    setCheckAll(e.target.checked);
  };
  return (
    <>
      <Checkbox.Group style={{ width: "100%" }} value={actives} onChange={onChange}>
        <Row>
          {items.map((i) => {
            return (
              <Col className={actives.includes(i.value) ? "active" : ""}>
                <Checkbox value={i.value}>{i.label}</Checkbox>
              </Col>
            );
          })}
        </Row>
      </Checkbox.Group>
      <Checkbox onChange={onCheckAllChange} checked={checkAll}>
        Check all
      </Checkbox>
    </>
  );
};