使用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;
相关推荐
灵感__idea42 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
爱装代码的小瓶子2 小时前
数据结构之队列(C语言)
c语言·开发语言·数据结构
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam4 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8505 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
aramae5 小时前
大话数据结构之<队列>
c语言·开发语言·数据结构·算法
cccc来财6 小时前
Java实现大根堆与小根堆详解
数据结构·算法·leetcode
你这个年龄怎么睡得着的6 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀6 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce8 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript