封装可多选的组件(Autocomplete)

一。组件库Material UI

     1.1 地址

               https://v4.mui.com/zh/getting-started/installation/

     1.2 简介

               自称世界上最受欢迎的React UI组件库(能看到这里的基本用法应该都清楚了,我就不重复了)

二。效果展示

      

三。代码展示

        import React from 'react'
        import { useField, useFormikContext } from 'formik'
        import { TextField as MuiTextField } from '@material-ui/core'
        import { Autocomplete } from '@material-ui/lab'
        const MuitipleSelectFields = (props) => {
            const {
                name,
                style,
                size,
                limitTags,
                disabled = false,
                option = [],
                ...otherProps } = props
            const [field, meta, helpers] = useField('')
            // useField(这里面应该是name,但是我使用name,
            // value的值会是null,导致出错 如果有懂的可以一起探讨)
            const { isSubmitting, setFieldValue } = useFormikContext()
            return (
                < Autocomplete
                    value={field.value}
                    style={style}
                    limitTags={limitTags} // 显示的最大的标签数
                    mulTiple={true}   // 如果为true 就支持多个选项
                    // 如果为true  选择一项就不会关闭弹窗
                    disableCloseOnSelect={true}
                    disabled={disabled}  // 是否禁用
                    noOptionsText="无匹配选项"
                    size="samll"
                    option={option}  // 选择数组
                    onChange={(e, i, r) => {
                        setFieldValue(name, i, true)
                    }}
                    getOptionSelected={(option, value) => {
                        return option.value === value.value
                    }}
                    onBlur={() => helpers.setTouched({ [naem]: true })}
                    // 用于确定给选项的字符串值,它用于填充输入
                    getOptionLable={({ text }) => text}
                    renderInput={(params) => {  // 呈现输入
                        <MuiTextField
                            {...params}
                            {...otherProps}
                            // 如果为true  输入框将显示错位状态
                            error={meta.touched && !!meta.error}
                            // 辅助文本内容
                            helperText={meta.touched && !!meta.error ? meta.error : null}
                            variant="outlined" //想要使用的变体
                        />
                    }}
                />)
        }
        export default MuitipleSelectFields

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

sql中group by和having的使用

group by&#xff1a;按照某个字段或者某些字段进行分组。 having&#xff1a;对分组之后的数据进行再次过滤&#xff0c;having必须和group by一起用&#xff0c;且在group by后面。 比如person表如下&#xff08;以下查询均基于此表&#xff09;&#xff1a; 1.group by 用法…

linux 命令 sudo、su 命令

sudo命令详解 1、初识sudo sudo是linux下常用的允许普通用户使用超级用户权限的工具&#xff0c;sudo 用来执行需要提升权限&#xff08;通常是作为 root 用户&#xff09;的命令&#xff0c;允许系统管理员让普通用户执行一些或者全部的root命令&#xff0c;如halt&#xff…

002、ArkTS

之——开发语言 目录 之——开发语言 杂谈 正文 1.TypeScript基础 1.1 基础类型 1.2 条件语句 1.3 函数 1.4 类 1.5 模块 1.6 迭代器 2.ArkTS 2.1 JAVA SCRIPT 2.2 TS 2.3 ArkTS ​编辑 3.示例 3.1 概述性示例 3.2 自定义组件 3.3 渲染控制语法 3.4 状态管…

【C++】什么是模板?怎样使用模板?

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.函数模板 1.1函数模板概念 1.2函数…

研究前沿|NAR:一个综合性的植物代谢组数据库

引言 2023年10月&#xff0c;华中农业大学小麦改良创新团队陈伟教授课题组在Nucleic Acids Research发表题为“PMhub 1.0: a comprehensive plant metabolome database”的文章&#xff0c;系统介绍了他们开发的植物代谢分析网站&#xff08;PMhub&#xff09;的功能与价值。P…

Maven生命周期

Maven生命周期 通过IDEA工具的辅助&#xff0c;能很轻易看见Maven的九种生命周期命令&#xff0c;如下&#xff1a; 双击其中任何一个&#xff0c;都会执行相应的Maven构建动作&#xff0c;为啥IDEA能实现这个功能呢&#xff1f;道理很简单&#xff0c;因为IDEA封装了Maven提供…

PDF控件Spire.PDF for .NET【转换】演示:将C#/VB.NET:将 PDF 转换为 PostScript (PS)

PostScript 是 Adobe Systems 在 20 世纪 80 年代开发的一种将数字图形或文本文件转换为可供打印的固定格式的方法。随着时间的推移&#xff0c;虽然 PostScript (PS) 文件格式不再像以前那样流行&#xff0c;但现在大多数打印机仍然支持它。在本文中&#xff0c;您将了解如何使…

【刷题笔记】匹配字符串||KMP||动图解析||符合思维方式

找出字符串中第一个匹配项的下标 1 题目描述 https://leetcode.cn/problems/find-the-index-of-the-first-occurrence-in-a-string/ 给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开…

IP-Adapter:文本兼容图像提示适配器,用于文本到图像扩散模型

IP-Adapter这是一种有效且轻量级的适配器&#xff0c;用于实现预训练文本到图像扩散模型的图像提示功能。只有 22M 参数的 IP 适配器可以实现与微调图像提示模型相当甚至更好的性能。IP-Adapter 不仅可以推广到从同一基本模型微调的其他自定义模型&#xff0c;还可以推广到使用…

OpenVINO异步Stable Diffusion推理优化方案

文章目录 Stable Diffusion 推理优化背景技术讲解&#xff1a;异步优化方案思路&#xff1a;异步推理优化原理OpenVINO异步推理Python API同步和异步实现方式对比 oneflow分布式调度优化优势&#xff1a;实现思路 总结&#xff1a; Stable Diffusion 推理优化 背景 2022年&am…

Selenium 连接到现有的 Firefox 示例

当前环境&#xff1a; python 3.7 selenium 3.14.1 urllib3 1.26.8 Frefox 115.1.0esr(32位) geckodriver.exe 0.33.0 1 下载 Firefox 浏览器&#xff0c;根据自己的需要选择。 下载 Firefox 浏览器&#xff0c;这里有简体中文及其他 90 多种语言版本…

招标采购软件如何让采购变得更轻松?

企业总是希望让采购流程更简单&#xff0c;选择更好的供应商&#xff0c;花更少的钱。采购软件的普及使原材料和服务的采购变得更容易&#xff0c;向供应商&#xff08;甚至是全球供应商&#xff09;索取信息的流程已大大简化。包括招标采购软件在内的采购技术已成为企业运营不…

Elasticsearch(ES)概述

文章目录 一.什么是Elasticsearch?1.正向索引和倒排索引2.Mysql和ES的概念对比3.安装elasticsearch、kibana 二.IK分词器三.索引库操作四.文档操作五.RestClient操作索引库1.初始化RestClient2.创建索引库3.删除索引库4.判断索引库是否存在 六.RestClient操作文档1.新增文档2.…

【开发实践】使用POI实现导出带有复杂表头的的excel文件

一、需求分析 公司业务部门需要&#xff0c;根据一些数据&#xff0c;加上表头&#xff0c;导出需要的excel表格。效果如下&#xff1a; 二、代码实现 【依赖准备】 <!-- POI --><dependency><groupId>org.apache.poi</groupId><artifactId>po…

CloudCompare简单开发

一、概述 CloudCompare如何进行二次开发&#xff1f;_cloudcompare 二次开发-CSDN博客 开发一个功能&#xff0c;在原始CC的基础上添加一个拓展功能&#xff0c;如下&#xff1a; 二、功能开发 1、修改MainWindow.UI 重点是&#xff1a;要编译&#xff0c;不然在mainwindow.…

P8A110-A120经典赛题

Web应用程序SQL Inject安全攻防 任务环境说明&#xff1a; 服务器场景&#xff1a;WebServ2003&#xff08;用户名&#xff1a;administrator&#xff1b;密码&#xff1a;空&#xff09;服务器场景操作系统&#xff1a;Microsoft Windows2003 Server 服务器场景安装服务/工…

yolov5检测(前向)输入视频输出(不在图上画标签形式的原)图片的方法,及设置每隔几帧保存的方式(不每帧保存减少重复)

这些天我忽然有个需求&#xff0c;要更新迭代一个场景的检测模型&#xff0c;甲方爸爸提供的新数据集是监控视频形式的(因为拍视频确实更加的方便)&#xff0c;而我训练模型确实要标注好的图片形式。 根据这些条件的话&#xff0c;思路应该是要这样的&#xff1a;首先使用现有的…

【Android知识笔记】性能优化专题(四)

App 线程优化 线程调度原理 任意时刻,只有一个线程占用CPU,处于运行状态多线程并发:轮流获取CPU使用权JVM负责线程调度:按照特定机制分配CPU使用权线程调度模型 分时调度模型:轮流获取、均分CPU时间抢占式调度模型:优先级高的获取,JVM采用Android线程调度 nice值:Proc…

解密Python内置类属性__getitem__的神奇魔力:深入探索索引访问的奥秘

概要 在Python编程语言中&#xff0c;__getitem__是一种内置的类属性&#xff0c;它允许我们以索引的方式访问对象的元素。这个魔法方法在Python中被广泛使用&#xff0c;它不仅让我们能够使用索引来访问对象的元素&#xff0c;还能让我们自定义对象的索引访问方式&#xff0c…

STM32 ADC转换器、串口输出

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、ADC是什么&#xff1f;二、STM32的ADC2.1 认识STM32 ADC2.2转换方式2.3 为什么要校准&#xff1f;2.4 采样时间计算2.5 触发方式2.6 多通道采集解决方案2.7…