React + Antd 自定义Select选择框 全选、清空功能

实现代码

import React, { useState, useEffect } from 'react';
import { Select, Space, Divider, Button } from 'antd';export default function AllSelect (props) {const {fieldNames, // 自定义节点labbel、value、options、grouLabeloptions, // 数据化配置选项内容,{label,value}[]value, // 指定当前选中的条目,多选时为一个数组onChange, // 选中option或input的value变化时...restProps} = props;// console.log('AllSelect', mode);const [selectValue, setSelectValue] = useState([]);const [isShowAll, setIsShowAll] = useState(false);const selectAll = () => {let values = options.map(option => {return fieldNames.value? option[fieldNames.value]: option.value || option;});setSelectValue(values);onChange(values);};const clearAll = () => {setSelectValue([]);onChange([]);};// 选中option或input的value变化时const handleChange = (values, option) => {console.log('handleChange', values);setSelectValue(values);onChange(values);};// 页面加载完成时调用useEffect(() => {if (props.mode) {setIsShowAll(true);} else {setIsShowAll(false);}}, []);return (<Selectplaceholder='请选择'fieldNames={fieldNames}value={selectValue}options={options}onChange={handleChange}dropdownRender={menu => (<>{menu}{isShowAll ? (<><Divider style={{ margin: '8px 0' }} /><Space><Button type='link' onClick={selectAll}>全选</Button><Button type='link' onClick={clearAll}>清空</Button></Space></>) : ('')}</>)}{...restProps}></Select>);
}

使用

import { useState } from "react";export default function SelectDemo() {const { optionList, setOptionList } = useState([{id: 1,name: "律师",},{id: 2,name: "教师",},{id: 3,name: "厨师",},{id: 4,name: "会计",},]);return (<AllSelectstyle={{ width: 300 }}options={optionList}mode="multiple"defaultValue={[]}maxTagCount="responsive"fieldNames={{ label: "name", value: "id" }}></AllSelect>);
}

参考:
https://blog.csdn.net/likepoems/article/details/128549643
https://www.cnblogs.com/likepoems/p/17025233.html
https://blog.csdn.net/qq_41620887/article/details/129985339

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/136534.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MeterSphere 任意文件读取漏洞(CVE-2023-25814)

MeterSphere 任意文件读取漏洞&#xff08;CVE-2023-25814&#xff09; 免责声明漏洞描述漏洞影响漏洞危害网络测绘Fofa: title"MeterSphere" 漏洞复现1. 构造poc2. 发送数据包3. 查看文件 免责声明 仅用于技术交流,目的是向相关安全人员展示漏洞利用方式,以便更好地…

线性代数(六)| 二次型 标准型转换 正定二次型 正定矩阵

文章目录 1. 二次型化为标准型1.1 正交变换法1.2 配方法 2 . 正定二次型与正定矩阵 1. 二次型化为标准型 和第五章有什么样的联系 首先上一章我们说过对于对称矩阵&#xff0c;一定存在一个正交矩阵Q&#xff0c;使得$Q^{-1}AQB $ B为对角矩阵 那么这一章中&#xff0c;我们…

C/C++轻量级并发TCP服务器框架Zinx-游戏服务器开发006:基于redis查找玩家姓名+游戏业务实现总结

文章目录 1 Redis的安装与API的使用1.1 安装目录及环境变量1.2 设置远程客户端连接和守护进程1.3 启动redis1.4 Hiredis API的使用1.5 我的动态库和头文件 2 Redis的使用2.1 初始化时候2.2 结束的时候 3 测试4 Makefile5 游戏业务总结 1 Redis的安装与API的使用 1.1 安装目录及…

VUE页面导出PDF方案

1&#xff0c;技术方案为&#xff1a;html2canvas把页面生成canvas图片&#xff0c;再通过jspdf生成PDF文件&#xff1b; 2&#xff0c;安装依赖&#xff1a; npm i html2canvas -S npm i jspdf -S 3&#xff0c;封装导出pdf方法exportPdf.js: // 页面导出为pdf格式 //titl…

已解决:rm: 无法删除“/opt/module/zookeeper-3.4.10/zkData/zookeeper_server.pid“: 权限不够

解决&#xff1a; ZooKeeper JMX enabled by default Using config: /opt/module/zookeeper-3.4.10/bin/../conf/zoo.cfg Stopping zookeeper ... /opt/module/zookeeper-3.4.10/bin/zkServer.sh: 第 182 行:kill: (4149) - 不允许的操作 rm: 无法删除"/opt/module/zooke…

【技术驿站】分布式基础与常见面试问题

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Brain Teaser概率类 - 抛硬币

问题 你有 17 个硬币&#xff0c;我有 16 个硬币&#xff0c;我们同时抛掷所有硬币。 如果你有更多的正面&#xff0c;那么你赢&#xff0c;否则我赢。 你获胜的概率是多少&#xff1f; 解答 划分出3个相互独立的事件&#xff1a;你抛前16枚硬币&#xff1b;我抛16枚硬币&am…

SQL第三次上机作业

1.查询与王利就读同一专业学生的借书证号和姓名 USE TSGL GO SELECT Lno,Rname FROM Reader WHERE Dept(SELECT DeptFROM ReaderWHERE Rname王利) and Rname ! 王利2.查询比希望出版社出版的所有图书价格都高的图书信息 SELECT * FROM Book WHERE Price>(SELECT MAX(Price…

【经验模态分解】3.EMD模态分解算法设计与准备工作

/*** poject 经验模态分解及其衍生算法的研究及其在语音信号处理中的应用* file EMD模态分解算法设计与准备工作* author jUicE_g2R(qq:3406291309)* * language MATLAB* EDA Base on matlabR2022b* editor Obsidian&#xff08;黑曜石笔记软…

Unity3d C#实现编辑器不运行状态下执行的脚本

第一章方式&#xff1a; 函数前面 [ContextMenu("Play")] &#xff0c;Inspector面板右键调用 第二种方式&#xff1a; OnValidate() &#xff0c;值改变自动执行 using UnityEngine; using System.Linq;public class NightController : MonoBehaviour {pub…

halcon的算子加速

关于实现Halcon算法加速的基础知识(2)&#xff08;多核并行/GPU&#xff09;-阿里云开发者社区 多核并行 aop gpu 内存泄漏 HOperatorSet.GenImage1Extern最后一个参数Marshal.GetFunctionPointerDelegate(freePtr) private static HalconApi.HClearProcCallBack freePtr …

已解决:云原生领域的超时挂载Bug — Kubernetes深度剖析

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

3.0.3版vsftpd所支持的FTP命令

2023年11月9日&#xff0c;周四下午 ABOR&#xff1a;中止当前的数据连接。ACCT&#xff1a;提供用户帐户信息&#xff0c;通常用于特定的站点访问控制。ALLO&#xff1a;为服务器上的文件分配存储空间。APPE&#xff1a;将数据添加到现有的远程文件中。CDUP&#xff1a;将当前…

17.复制字符串 ,包括\0

#include<stdio.h> #include <cstring>int main(){int len1,len2;char s1[44];char s2[33];scanf("%s",s1);scanf("%s",s2);len1strlen(s1)1;printf("先s1的字符长度为&#xff1a;%d\n",len1) ;strcpy(s1,s2) ;printf("复制字…

CCF ChinaSoft 2023 论坛巡礼 | 云计算标准化论坛

2023年CCF中国软件大会&#xff08;CCF ChinaSoft 2023&#xff09;由CCF主办&#xff0c;CCF系统软件专委会、形式化方法专委会、软件工程专委会以及复旦大学联合承办&#xff0c;将于2023年12月1-3日在上海国际会议中心举行。 本次大会主题是“智能化软件创新推动数字经济与社…

03【远程协作开发、TortoiseGit、IDEA绑定Git插件的使用】

上一篇&#xff1a;02【Git分支的使用、Git回退、还原】 下一篇&#xff1a;【已完结】 目录&#xff1a;【Git系列教程-目录大纲】 文章目录 一、远程协作开发1.1 远程仓库简介1.1.1 Github1.1.2 Gitee1.1.3 其他托管平台 1.2 发布远程仓库1.2.1 创建项目1&#xff09; 新…

案例:用户管理

案例&#xff1a;用户管理 1.展示用户列表2.添加用户3.删除用户 1.展示用户列表 url函数 获取用户星系HTML渲染 2.添加用户 url函数 GET。看到页面&#xff0c;输入内容POST。提交->写入到数据库 3.删除用户 url函数 http://127.0.0.1:8000/info/add/&#xff1f;ni…

视频编软件会声会影2024中文版功能介绍

会声会影2024中文版是一款加拿大公司Corel发布的视频编软件。会声会影2024官方版支持视频合并、剪辑、屏幕录制、光盘制作、添加特效、字幕和配音等功能&#xff0c;用户可以快速上手。会声会影2024软件还包含了视频教学以及模板素材&#xff0c;让用户剪辑视频更加的轻松。 会…

计讯物联高精度GNSS接收机:担当小型水库大坝安全监测解决方案的“护航者”

应用背景 水库大坝作为水利工程建筑物&#xff0c;承担着灌溉、发电、供水、生态等重任。一旦水库大坝发生安全事故&#xff0c;后果将不堪设想。因此&#xff0c;水库大坝的安全监测对保障水利工程顺利运行具有重要意义。 计讯物联作为水利行业专家型企业&#xff0c;多年来…

CSS实现背景图片全屏铺满自适应的方式(3种)

一 margin:0px; background: url(images/bg.png) no-repeat; background-size:100% 100%; background-attachment:fixed;tips&#xff1a; url(images/bg.png)——图片路径的位置&#xff1b; no-repeat—— 图片不重复&#xff1b; center 0px——center是距离页面左边的定…