logo素材网站有哪些厦门关键词优化报价
当在使用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();// onChangeconst 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><ButtononClick={() => {remove(name);}}icon={<DeleteOutlined />}/></div>);})}<Form.Item><Buttontype="dashed"blockicon={<PlusOutlined />}onClick={() => {add();}}>新增</Button></Form.Item></div>);}}</Form.List></Form>);
};export default FormListSelect;