使用Form.List且有Select组件

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

解决办法:

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

示例代码:

TypeScript 复制代码
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;
相关推荐
JuneXcy6 分钟前
结构体简介
c语言·数据结构·算法
给月亮点灯|26 分钟前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
叫我阿柒啊29 分钟前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
@CLoudbays_Martin111 小时前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php
j_xxx404_2 小时前
数据结构:栈和队列力扣算法题
c语言·数据结构·算法·leetcode·链表
南莺莺3 小时前
假设一个算术表达式中包含圆括号、方括号和花括号3种类型的括号,编写一个算法来判别,表达式中的括号是否配对,以字符“\0“作为算术表达式的结束符
c语言·数据结构·算法·
野犬寒鸦3 小时前
力扣hot100:旋转图像(48)(详细图解以及核心思路剖析)
java·数据结构·后端·算法·leetcode
缘如风3 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱3 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年3 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划