前端项目实战230-ant design 5.0 checkbox块级化

import { render } from "@testing-library/react";
import React, {
  useEffect,
  useState,
  useRef,
  FC,
  PropsWithChildren,
} from "react";
import { Checkbox, Space, List, Button, NavBar, Toast } from "antd-mobile";
import { selectEmployeeList, bindTaskStep } from "../sevices/codeing/codeing";
 
import { Item } from "rc-menu";
interface IPerson {
  onConfirm: () => void;
  taskStepId: number;
}
interface ICheck {
  code: string;
  name: string;
}
const ListItemWithCheckbox: FC<
  PropsWithChildren<{
    item: string;
  }>
> = (props) => {
  const checkboxRef = useRef<any>(null);
  return (
    <List.Item
      prefix={
        <div onClick={(e) => e.stopPropagation()}>
          <Checkbox value={props.item} ref={checkboxRef} />
        </div>
      }
      onClick={() => {
        checkboxRef.current?.toggle();
      }}
      arrow={false}
    >
      {props.item}
    </List.Item>
  );
};
const PersonManage: React.FC<IPerson> = (props: any) => {
  const [person, setPerson] = useState<Array<ICheck>>([]);
  const [value, setValue] = useState(["Apple"]);
  const { taskStepId } = props;
  useEffect(() => {
    (async function fn() {
      const response = await selectEmployeeList(null);
      setPerson(response.data);
      console.log(response, "response");
    })();
  }, []);
  const handleSave = async () => {
    if (value.length == 0) {
      Toast.show({
        icon: "fail",
        content: "请至少选择一项人员绑定",
      });
      return false;
    }
    const response = await bindTaskStep({
      empIds: value,
      taskStepId: taskStepId,
    });
    if (response.code == 200) {
      props.onConfirm();
      Toast.show({
        icon: "success",
        content: "绑定人员成功",
      });
    } else {
      Toast.show({
        icon: "fail",
        content: response.msg,
      });
    }
  };
  const back = () => {
    props.onConfirm();
    Toast.show({
      content: "返回任务界面",
      duration: 1000,
    });
  };
  return (
    <div>
      <NavBar back="返回" onBack={back}>
        绑定人员
      </NavBar>
 
      <div className="">
        <Checkbox.Group
          onChange={(v) => {
            setValue(v as string[]);
          }}
        >
          <Checkbox.Group>
            <List>
              {person &&
                person.map((item: any, index) => (
                  <ListItemWithCheckbox key={item.id} item={item.name} />
                ))}
            </List>
          </Checkbox.Group>
          {/* <List.Item onClick={() => {}}>
            {person &&
              person.map((item: any, index) => (
                <Checkbox value={item.id}>
                  [{item.id}]{item.name}
                </Checkbox>
              ))}
          </List.Item> */}
        </Checkbox.Group>
        <Button block color="primary" size="large" onClick={handleSave}>
          确定绑定
        </Button>
      </div>
    </div>
  );
};