前端案例-Select组件在编辑回显时如何将选不到的id回显为其他颜色

前端案例-Select组件在编辑回显时如何将选不到的id回显为其他颜色

场景描述:

一个酒店房间里面可以有很多产品的床单。

点击进入一个房间的详情页,可以设置选择哪一个产品,其中Select 的下拉框选项应该是从后端获取的该房间下的产品。但我们编辑该酒店房间信息的时候,我们可以修改该房间选中的产品。

但是在这样一种场景:该房间下可选择的产品已经将以前选中的产品删除了,因此Select无法正常回显,而且此时点击保存房间的详情信息也应该将这个选中的产品删除掉。

因此需求如下:点击编辑进来,判断以前选中的产品,目前是否还有继续在生产,如果没有,则将该产品标记为红色,并且不允许保存提交表单。

一、通过tagRender 属性将标签渲染为其他颜色。

Antd 的Select 组件提供了 tagRender 属性来自定义标签的渲染方式。

以下是一个示例,展示了如何使用 tagRender 属性将不存在于选项中的 ID 标记为红色:

import { Form, Select } from 'antd';
import './MyForm.css'; // 导入自定义样式文件const MyForm = () => {const productOptions = []; // 假设这是你的 productOptions 数组const handleProductChange = (value) => {// 处理产品变化的逻辑};const tagRender = (props) => {const { label, value, closable, onClose } = props;const isValueExist = productOptions.some((option) => option.value === value);return (<span className={isValueExist ? '' : 'red-tag'}>{label}{closable && (<span className="ant-select-selection-item-remove" onClick={onClose} />)}</span>);};return (<Form><Form.Itemname="prodIdentifierList"label=""style={{ marginBottom: 12 }}noStylerules={[{required: true,message: '产品不可以为空',},]}><Selectmode="multiple"placeholder="请选择产品"options={productOptions}tagRender={tagRender}onChange={handleProductChange}/></Form.Item></Form>);
};export default MyForm;

在上述示例中,我们定义了一个名为 tagRender 的函数作为 Select 组件的 tagRender 属性的值。在 tagRender 函数中,我们检查选项的值是否存在于 productOptions 中,并根据结果应用不同的类名来标记标签的颜色。如果值存在,则不添加任何类名;如果值不存在,则添加 'red-tag' 类名来标记标签的颜色为红色。

然后,在你的自定义样式文件 MyForm.css 中,你可以定义 .red-tag 类名的样式,将标签的文本颜色设置为红色:

.red-tag {color: red;
}

这样,当回显的 ID 不存在于选项中时,Select 组件中的标签文本将显示为红色。

二、对表单提交时进行校验。

更进一步,如果在 Select 组件中回显的 ID 在选项中不存在,你可以通过自定义校验规则来对表单项进行校验,并显示相应的错误信息。以下是一个示例:

t { Form, Select } from 'antd';const MyForm = () => {const productOptions = []; // 假设这是你的 productOptions 数组const handleProductChange = (value) => {// 处理产品变化的逻辑};const validateProduct = (_, value) => {const invalidProducts = value.filter((id) =>productOptions.every((option) => option.value !== id));if (invalidProducts.length > 0) {return Promise.reject('产品已经删除,不允许提交');}return Promise.resolve();};return (<Form><Form.Itemname="prodIdentifierList"label=""style={{ marginBottom: 12 }}noStylerules={[{required: true,message: '产品不可以为空',},{validator: validateProduct,},]}><Selectmode="multiple"placeholder="请选择产品"options={productOptions}onChange={handleProductChange}/></Form.Item></Form>);
};export default MyForm;

在上述示例中,我们定义了一个名为 validateProduct 的函数作为校验规则的验证器。在验证器函数中,我们首先筛选出在选项中不存在的产品 ID,并将其存储在 invalidProducts 数组中。如果 invalidProducts 数组不为空,表示存在已删除的产品,我们通过返回一个被拒绝的 Promise 来触发验证失败,并提供错误信息 '产品已经删除,不允许提交'

然后,在 Form.Item 组件的 rules 属性中,我们添加了一个新的规则对象,其中 validator 属性指向我们定义的 validateProduct 验证器函数。

这样,当回显的 ID 在选项中不存在时,表单项将触发校验失败,并显示指定的错误信息。

请注意,由于校验器是异步的,因此需要返回一个 Promise 对象。在校验通过时,应返回一个被解析的 Promise (Promise.resolve()),而在校验失败时,应返回一个被拒绝的 Promise 并提供错误信息 (Promise.reject('产品已经删除,不允许提交'))。

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

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

相关文章

前端性能监控和错误监控

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

Ubuntu 常用命令之 passwd 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 在Ubuntu系统中&#xff0c;passwd命令用于更改用户的密码。系统管理员可以使用此命令更改任何用户的密码&#xff0c;而普通用户只能更改自己的密码。 passwd命令的参数如下 -l, --lock&#xff1a;锁定密码&#xff0c;使账户…

拥抱鸿蒙 - 在展讯T606平台上的探索与实践

前 言 自OpenHarmony 问世后受到了社会各界的广泛关注&#xff0c;OpenHarmony 的生态系统在如火如荼的发展。 酷派作为一家积极拥抱变化的公司&#xff0c;经过一段时间的探索与实践&#xff0c;成功实现将OpenHarmony 系统接入到展讯平台上&#xff0c;我们相信这是一个重要…

Android Studio 安装和使用

前些天&#xff0c;打开了几年前的一个Android Studio app项目&#xff0c;使用安卓虚拟机仿真app崩溃&#xff0c;怀疑是不是中间升级过Android Studio导致异常的&#xff0c;马上脑子一热卸载了&#xff0c;结果上次踩过的坑&#xff0c;一个没少又踩一次&#xff0c;谨以此文…

大数据技术基本功-数据采集

产品指南&#xff5c;DataScale自定义采集器功能介绍产品指南&#xff5c;开发 DataScale Collector​​​​​​​

python用什么软件编写程序,python编写的软件有哪些

大家好&#xff0c;本文将围绕python用什么软件编写程序展开说明&#xff0c;python编写的软件有哪些是一个很多人都想弄明白的事情&#xff0c;想搞清楚用什么软件编写python需要先了解以下几个事情。 大家好&#xff0c;小编来为大家解答以下问题&#xff0c;python可以用什么…

word文档代码高亮_简单易操作_美化代码

跳转:代码高亮网站 复制-粘贴 简单易用 网站:https://highlightcode.com/高亮优化前: 高亮优化后:

一个很好用的Docker可视化管理工具

目录 前言Portainer安装部署使用 前言 一个好的docker可视化管理工具&#xff0c;可以提升我们不少的工作效率&#xff0c;下面我就推荐一个我使用过的&#xff0c;感觉很不错的一个可视化管理工具给大家 Portainer Portainer是一个开源的Docker管理工具&#xff0c;提供了容…

kindeditor The method toJSONString() is undefined for the type JSONObject

kindeditor 插件上传文件出错的 json_simple-1.1.jar 也不知道是多老的项目&#xff0c;多老的包了&#xff0c;稀有东西

【Date对象】js中的日期类型Date对象的使用详情

&#x1f601; 作者简介&#xff1a;一名大四的学生&#xff0c;致力学习前端开发技术 ⭐️个人主页&#xff1a;夜宵饽饽的主页 ❔ 系列专栏&#xff1a;JavaScript小贴士 &#x1f450;学习格言&#xff1a;成功不是终点&#xff0c;失败也并非末日&#xff0c;最重要的是继续…

重温经典struts1之自定义转换器及注册的两种方式(Servlet,PlugIn)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 前言 Struts的ActionServlet接收用户在浏览器发送的请求&#xff0c;并将用户输入的数据&#xff0c;按照FormBean中定义的数据类型&#xff0c;赋值给FormBean中每个变量&a…

JVM中的虚拟机栈的动态链接部分存放到底是什么

在Java虚拟机&#xff08;JVM&#xff09;中&#xff0c;每个线程在执行一个方法时都会创建一个栈帧&#xff08;Stack Frame&#xff09;&#xff0c;栈帧中包含了方法的运行时数据。栈帧通常包括局部变量表、操作数栈、动态链接、方法返回地址等部分。 动态链接 动态链接&a…

“2024世亚软博会”促进软件产业国际化交流与合作的重要窗口

随着科技的飞速发展&#xff0c;软件行业在全球范围内呈现出井喷式的增长。未来&#xff0c;随着软件行业开放的深入&#xff0c;市场机制逐渐完善&#xff0c;人才和政策的持续支持&#xff0c;软件行业将继续保持蓬勃发展态势&#xff0c;为全球用户提供更加优质、智能的软件…

Ansible的脚本----playbook剧本

Playbook组成部分 tasks 任务&#xff1a;包含要在目标主机上执行的操作&#xff0c;使用模块定义这些操作。每个任务都是一个模块的调用。Variables 变量&#xff1a;存储和传递数据。变量可以自定义&#xff0c;可以在playbook当中定义全局变量&#xff0c;可以外部传参。T…

探索未来交通!空客、宝马开启新一轮“量子计算挑战赛”

12月6日&#xff0c;空中客车公司和宝马集团共同发起了一项名为 “量子交通探索”的全球量子计算挑战赛&#xff0c;以应对航空和汽车领域最紧迫的挑战——这些挑战对于传统计算机而言仍然是难以克服的。 这项挑战是首创性的&#xff0c;它将两个全球行业领导者聚集在一起&…

什么是大小端?

今天说一下什么是大小端模式&#xff1f; 大小端模式指的是什么&#xff1f;通常我们在存储器当中存储数据的字节顺序&#xff0c;注意这里强调的是“字节的顺序”。因为在计算机系统中&#xff0c;不管是单片机DSP或者是X86&#xff0c;我们说一个地址对应的存储空间大小呢就是…

动态内存分配

为什么存在内存开辟 我们掌握的内存开辟方式有 int val 20;//在栈空间上开辟四个字节 char arr[10] {0}&#xff1b;//在栈空间上开辟十个连续的内存空间 但是上述开辟空间的方式有两个特点&#xff1a;1.空间开辟大小是固定的。 2.数组在申明的时候&#xff0c;必须指明数…

ICLR 2024 高分论文 | Step-Back Prompting 使大语言模型通过抽象进行推理

文章目录 一、前言二、主要内容三、总结🍉 CSDN 叶庭云:https://yetingyun.blog.csdn.net/ 一、前言 ICLR 2024 高分论文:《Step-Back Prompting Enables Reasoning Via Abstraction in Large Language Models》 论文地址:https://openreview.net/forum?id=3bq3jsvcQ1 …

分析某款go扫描器之四

一、概述 上文提到实现IP的探测存活以及tcp扫描的实现&#xff0c;这部分来分析实现本机网卡信息获取&#xff0c;以及维护一张mac地址表以及ip扫描端口状态表&#xff0c;同时实现syn扫描功能。 项目来源&#xff1a;https://github.com/XinRoom/go-portScan/blob/main/util…

深入了解Python中staticmethod的使用技巧

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在Python中&#xff0c;staticmethod是一种用于定义静态方法的装饰器。静态方法是类中的方法&#xff0c;它不依赖于类的实例&#xff0c;也就是说&#xff0c;可以在没有创建类实例的情况下调用它。在本教程中&…