使用Form.List且有Select组件

当在使用Form.List组件，且组件中有Select选项时，针对每一次选择，都要过滤掉那些已经选择过的选项，可能遇到的问题：

直接过滤会将每一个Select中的options选项都过滤掉，无法正常展示选择的选项

解决办法：

使用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;