使用antd-TreeSelect实现下拉复选且有全部选项的select

最新推荐文章于 2024-05-27 10:56:03 发布

周杰伦才不会写代码呢

最新推荐文章于 2024-05-27 10:56:03 发布

阅读量476

点赞数 3

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/qq_39584251/article/details/136403015

版权

本文介绍了如何在React中使用AntDesign的TreeSelect组件实现树状选择器的全选/取消功能，通过useState管理组件状态并处理onChange事件以适应不同选择情况。

摘要由CSDN通过智能技术生成

需求

过程

本来想问gpt，偷奸耍滑一下，结果发现gpt替代人类还有很长的路需要走哦🤪

代码

import React, { useState } from "react";
import { TreeSelect } from "antd";

const { SHOW_PARENT } = TreeSelect;

const treeData = [
    {
        title: "全部",
        value: "0",
        key: "0",
        state: true,
    },
    {
        title: "Node1",
        value: "1",
        key: "1",
        state: true,
    },
    {
        title: "Node2",
        value: "2",
        key: "2",
        state: true,
    },
    {
        title: "Node3",
        value: "3",
        key: "3",
        state: true,
    },
];

const Summary: React.FC = () => {
    const [value, setValue] = useState<string[]>([]);
    const onChange = (
        newValue: string[],
        label: any,
        extra: { preValue: string[] }
    ) => {
        //preSelectAll：上一次是否全选
        const preSelectAll = extra.preValue?.map((v) => v.value).includes("0");
        // 上一次没有全选，这次全选了=》全选
        if (!preSelectAll && newValue.includes("0")) {
            console.log("全选");
            setValue(treeData.map((v) => v.value));
            return;
        }
        // 已经选择的有全选，点击选项=》取消全选选项且选择选项
        else if (newValue.length > 1 && newValue.includes("0")) {
            setValue(newValue.filter((v) => v !== "0"));
        }
        // 上一次全选，这次取消全选=》全部反选
        else if (preSelectAll && !newValue.includes("0")) {
            setValue([]);
        }
        // 没有选择全选选项，但是选择了别的所有选项=》选择全部选项（包括全选）
        else if (
            newValue.length == treeData.length - 1 &&
            !newValue.includes("0")
        ) {
            setValue(treeData.map((v) => v.value));
        }
        //正常选择
        else {
            setValue(newValue);
        }
    };
    const tProps = {
        treeData,
        value,
        onChange,
        treeCheckable: true,
        showCheckedStrategy: SHOW_PARENT,
        placeholder: "Please select",
        style: {
            width: "100%",
        },
    };

    return <TreeSelect {...tProps} />;
};

export default Summary;