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