使用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;
相关推荐
某公司摸鱼前端25 分钟前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~26 分钟前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
wen's2 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
水木兰亭2 小时前
数据结构之——树及树的存储
数据结构·c++·学习·算法
vvilkim3 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim3 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心3 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络3 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
Jess073 小时前
插入排序的简单介绍
数据结构·算法·排序算法
老一岁3 小时前
选择排序算法详解
数据结构·算法·排序算法