react函数组件+antd实现多选框全选取消全选单选功能

最新推荐文章于 2024-08-20 09:41:26 发布

Hi-Sun

最新推荐文章于 2024-08-20 09:41:26 发布

阅读量2.1k

点赞数 1

文章标签： react.js ts checkbox

本文链接：https://blog.csdn.net/Helloyaling/article/details/120514887

版权

这篇博客详细介绍了如何使用React实现一个全选和多选标签的功能。通过`useState`管理状态，结合`Checkbox`和`Form`组件，创建了一个可以进行单选和全选操作的标签选择器。示例代码展示了从状态初始化到事件处理的完整流程，适用于前端UI交互开发。

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


import React, {FC,useState} from "react";
import { Checkbox, Divider, Form} from "antd";


const newPortrait: FC = () => {
    const [chooseLabel, setChooseLabel] = useState<Array<any>>([]) // 选择的多选标签
    const [checkAll, switchCheckAll] = useState<boolean>(false); // 全选flag
    const [indeterminate, setIndeterminate] = useState<boolean>(false);
    const [labelsList, setLabelsList] = useState<any[]>([]);  // 标签列表
    const [initLabels, setInitLabels] = useState<any[]>([]);  // 全部的标签labelKey组成的列表

    // 单选
    const checkThis = (e: any) => {
        setChooseLabel(e);
        setIndeterminate(!!chooseLabel.length && chooseLabel.length < initLabels.length);
        switchCheckAll(chooseLabel.length === initLabels.length);
    };
    // 全选
    const onCheckAllChange = (e: any, type: number) => {
        setChooseLabel(e.target.checked ? initLabels : []);
        setIndeterminate(false);
        switchCheckAll(e.target.checked);
    };

    return (
        <div className="new-box">
            <div className="label-select">
                <div className="choose-group">
                    <Checkbox
                        className="choose-all"
                        indeterminate={indeterminate}
                        onClick={(e) => onCheckAllChange(e, 0)}
                        checked={checkAll}>
                        全选
                    </Checkbox>
                    <span className="choose-none" onClick={(e) => {
                        switchCheckAll(false);
                        onCheckAllChange(e, 1)
                    }}>清除选择</span>
                </div>
                <Divider className="divider"/>
                <div className='lb_cate'>
                    <Form
                        className="label-form"
                        labelCol={{span: 3}}
                        wrapperCol={{span: 21}}
                    >
                        <Checkbox.Group value={chooseLabel} onChange={e => checkThis(e)}>
                            {
                                labelsList.map((item: any, index: number) => {
                                    return (
                                        <Form.Item label={item.labelCategory.labelName} key={index}
                                                   className="one-part">

                                            {
                                                item.labels.map((iv: any, index: number) => {
                                                    return (
                                                        <Checkbox
                                                            className="single-label"
                                                            key={iv.id}
                                                            value={iv.labelKey}
                                                        >
                                                            <span key={iv.labelCode}>{iv.labelName}</span>
                                                        </Checkbox>
                                                    )
                                                })
                                            }
                                        </Form.Item>
                                    )
                                })
                            }
                        </Checkbox.Group>
                    </Form>
                </div>
            </div>

        </div>

    )
}

export default newPortrait