Antd中使用Form.List且有Select组件,过滤问题

news2025/4/20 4:15:59
当在使用Form.List组件,且组件中有Select选项时,针对每一次选择,都要过滤掉那些已经选择过的选项,可能遇到的问题:
  1. 直接过滤会将每一个Select中的options选项都过滤掉,无法正常展示选择的选项

解决办法:

  1. 使用onChange,对选择的内容重新赋值,触发options的过滤函数

示例代码:

import { Form, Select, Button } from 'antd';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';

const options = [
  {
    value: 1,
    label: 'test1',
  },
  {
    value: 2,
    label: 'test2',
  },
  {
    value: 3,
    label: 'test',
  },
];

const FormListSelect = () => {
  const [form] = Form.useForm();

  // onChange
  const handleChange = () => {
    const fieldsValue = form.getFieldsValue(); // 获取当前表单的值

    // 每一次赋值,都会触发optionsFilter函数自动执行,重新计算当前选择框的选项
    form.setFieldsValue({ ids: fieldsValue?.ids });
  };

  // 对选项进行过滤
  const optionsFilter = (index: number) => {
    console.log(index);

    const ids = form
      .getFieldValue('ids')
      ?.filter((item) => !!item)
      ?.map((item) => item?.id);

    ids.splice(index, 1);

    const fiterOptions = options.filter((item) => !ids.some((id: string) => item.value === id));
    return fiterOptions;
  };

  return (
    <Form form={form}>
      <Form.List name="ids">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map(({ key, name, ...restField }) => {
                return (
                  <div key={key} style={{ display: 'flex', gap: '20px' }}>
                    <Form.Item name={[name, 'id']} style={{ flex: 1 }}>
                      <Select
                        {...restField}
                        options={optionsFilter(name)}
                        onChange={handleChange}
                      />
                    </Form.Item>
                    <Button
                      onClick={() => {
                        remove(name);
                      }}
                      icon={<DeleteOutlined />}
                    />
                  </div>
                );
              })}
              <Form.Item>
                <Button
                  type="dashed"
                  block
                  icon={<PlusOutlined />}
                  onClick={() => {
                    add();
                  }}
                >
                  新增
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>
    </Form>
  );
};

export default FormListSelect;

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

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

相关文章

VSCODE插值表达式失效问题

GET https://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js net::ERR_CONNECTION_-CSDN博客 更换正确的vue域名 GET https://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js net::ERR_CONNECTION_ <script src"https://unpkg.com/vue2.6.14/dist/vue.js"></sc…

【失败】Gnome将默认终端设置为 Kitty

起因 一会儿gnome-terminal一会儿kitty终端&#xff0c;实在是受不了&#xff0c;决定取缔默认的gnome-terminal。 过程 在 Ubuntu 或 Debian 系统上&#xff1a; 确保 Kitty 已经安装。如果未安装&#xff0c;可以在终端中运行命令sudo apt install kitty -y进行安装。 使用系…

蓝桥杯:连连看

本题大意要我们在一个给定的nxm的矩形数组中找出符合条件的格子 条件如下&#xff1a; 1.数值相同 2.两个横坐标和纵坐标的差值相等&#xff08;由此可得是一个对角线上的格子&#xff09; 那么根据以上条件我们可以用HashMap来解决这个问题&#xff0c;统计对角线上数值相同…

Ext系列⽂件系统

Ext系列⽂件系统 1. 理解硬件1.1 磁盘的物理结构1.2 磁盘的存储结构1.3 磁盘的逻辑结构理解过程实际过程 1.4 CHS&&LBA地址 2. 引入文件系统块分区innode 3. Ext2文件系统3.1 宏观认识3.2 block group3.3 块组内部3.3.1 GDT&#xff08;Group Descriptor Table&#xf…

MTK-Android12 13 屏蔽掉Viewing full screen

去掉ROOM 开机第一次提示全屏弹框 文章目录 需求参考资料修改文件实现方案 解决思路grep 源码查找信息grep 查找 grep -rn "Viewing full screen" 找string 字段grep 查找 grep -rn immersive_cling_title 布局grep 查找 grep -rn layout.immersive_mode_cling 对应的…

GitHub创建远程仓库

使用GitHub创建远程仓库&#xff1a;从零开始实现代码托管与协作 前言 在当今软件开发领域&#xff0c;版本控制系统已成为开发者必备的核心工具。作为分布式版本控制系统的代表&#xff0c;Git凭借其强大的分支管理和高效的协作能力&#xff0c;已成为行业标准。而GitHub作为…

【AI部署】腾讯云GPU -—SadTalker的AI数字人访问web服务—未来之窗超算中心

访问部署在Cloud Studio上的web服务 当你把该项目部署在本地时&#xff0c;访问该服务的请求地址为http://localhost:8080/hello&#xff1b;当你把该项目部署在Cloud Studio工作台启动时&#xff0c;要想访问到该服务&#xff0c;需要先在工作台右侧打开访问链接面板&#xff…

fastdds:传输层SHM和DATA-SHARING的区别

下图是fastdds官方的图&#xff0c;清晰地展示了dds支持的传输层: 根据通信双方的相对位置(跨机器、同机器跨进程、同进程)的不同选择合适的传输层&#xff0c;是通信中间件必须要考虑的事情。 跨机器&#xff1a;udp、tcp 跨机器通信&#xff0c;只能通过网络&#xff0c; f…

树莓派_利用Ubuntu搭建gitlab

树莓派_利用Ubuntu搭建gitlab 一、给树莓派3A搭建基本系统 1、下载系统镜像 https://cdimage.ubuntu.com/ubuntu/releases/18.04/release/ 2、准备系统SD卡 二、给树莓派设备联网 1、串口后台登录 使用串口登录后台是最便捷的&#xff0c;因为前期网络可能不好直接成功 默…

ARINC818协议(三)

源特定参数 源特定参数被定义&#xff0c;用于在源和目的之间进行传输 源特定参数包括初始化&#xff0c;合适的解释&#xff0c;周期性的验证。 gamma or palette tables&#xff1a;伽马或者调色板 color format:颜色格式 Brightness and backlight control &#xff1a;亮度…

得佳胜哲讯科技 SAP项目启动会:胶带智造新起点 数字转型新征程

在全球制造业加速向数字化、智能化转型的浪潮中&#xff0c;胶带制造行业正迎来以“自动化生产、数据化运营、智能化决策”为核心的新变革。工业互联网、大数据分析与智能装备的深度融合&#xff0c;正推动胶带制造从传统生产模式向“柔性化生产精准质量控制全链路追溯”的智慧…

万字解析TCP

通过学习视频加博客的组合形式&#xff0c;整理了一些关于TCP协议的知识。 *图源&#xff1a;临界~的csdn博客。 一、TCP建立连接 TCP的建立连接&#xff0c;大致可以分为面向连接、TCP报文结构、TCP的三次握手、TCP的建立状态、SYN泛洪攻击。 1.1、面向连接 面向连接 --- …

2025年大数据实训室建设及大数据实训平台解决方案

一、引言 在数字化浪潮中&#xff0c;大数据技术已成为推动各行业创新发展的核心驱动力。从金融领域的风险预测到医疗行业的精准诊断&#xff0c;从电商平台的个性化推荐到交通系统的智能调度&#xff0c;大数据的应用无处不在。据权威机构预测&#xff0c;到 2025 年&#xf…

贪心、动态规划、其它算法基本原理和步骤

目录 1. 贪心1.1 贪心算法的基本步骤1.2 贪心算法实战1.2.1 贪心的经典问题1.2.2 贪心解决数组与子序列问题1.2.3 贪心解决区间调度问题1.2.4 贪心解决动态决策问题1.2.5 贪心解决一些复杂场景应用 2. 动态规划2.1 动态规划的基本步骤和一些优化2.2 动态规划实战2.2.1 斐波那契…

python-各种文件(txt,xls,csv,sql,二进制文件)读写操作、文件类型转换、数据分析代码讲解

1.文件txt读写标准用法 1.1写入文件 要读取文件&#xff0c;首先得使用 open() 函数打开文件。 file open(file_path, moder, encodingNone) file_path&#xff1a;文件的路径&#xff0c;可以是绝对路径或者相对路径。mode&#xff1a;文件打开模式&#xff0c;r 代表以…

ctfshow-大赛原题-web702

因为该题没有理解到位&#xff0c;导致看wp也一直出错&#xff0c;特此反思一下。 参考yu22x师傅的文章 &#xff1a;CTFSHOW大赛原题篇(web696-web710)_ctfshow 大赛原题-CSDN博客 首先拿到题目&#xff1a; // www.zip 下载源码 我们的思路就是包含一个css文件&#xff0c;…

Triton(2)——Triton源码接结构

1 triton 3.0.0 源码结构 triton docs/&#xff1a;项目文档 cmake/&#xff1a;构建配置相关 bin/&#xff1a;工具、脚本 CmakeLists.txt&#xff1a;cmake 配置文件 LSCENSE README.md Pyproject.toml&#xff1a;python 项目配置文件 utils/&#xff1a;项目配置文…

容器docker入门学习

这里写目录标题 容器容器的软件厂商 dockerdocker引擎 虚拟化虚拟化技术 docker安装详解1、安装检查2、安装yum相关的工具3、安装docker-ce软件4、查看docker版本5、启动docker服务6、设置docker开机启动7、查看有哪些docker容器运行进程8、查看容器里有哪些镜像9、下载nginx软…

HarmonyOS NEXT开发教程:全局悬浮窗

今天跟大家分享一下HarmonyOS开发中的悬浮窗。 对于悬浮窗&#xff0c;可能有的同学会想到使用层叠布局是否可以实现&#xff0c;将悬浮窗叠在导航栏组件Tabs上&#xff0c;像这样&#xff1a; Stack({alignContent:Alignment.BottomEnd}){Tabs({barPosition:BarPosition.End…

解锁元生代:ComfyUI工作流与云原生后端的深度融合

目录 蓝耘元生代&#xff1a;智算新势力崛起​ ComfyUI 工作流创建详解​ ComfyUI 初印象​ 蓝耘平台上搭建 ComfyUI 工作流​ 构建基础工作流实操​ 代码示例与原理剖析​ 云原生后端技术全景 云原生后端概念解析​ 核心技术深度解读​ 蓝耘元生代中两者的紧密联系​…