实现方法:
思路就是在选择框的onChange事件中,将已经选中的值存储到一个state中。然后对于每个选择框,在渲染时判断该选择框的选项是否在已选中的值中,如果是,则禁用该选项。
对于删除操作,可以在Form.List的remove方法中将已经删除的值从已选中的值中移除,以恢复该选项的可选状态。
代码如下:
// 在组件中定义已选中的值的state
const [selectedValues, setSelectedValues] = useState([]);
// 处理选择框的onChange事件
const handleSelectChange = (value, index) => {
const newSelectedValues = [...selectedValues];
newSelectedValues[index] = value;
setSelectedValues(newSelectedValues);
};
<Form.List name="detailList">
{(fields, { add, remove }) => (
<>
{/* 省略其他表单组件 */}
{fields.map(({ key, name, fieldKey, ...restField }, index) => (
<Form.Item {...restField} label="规格" name={[name, 'norms']}>
<Select
placeholder="请选择"
onChange={value => handleSelectChange(value, index)}
disabled={selectedValues.includes(restField.value) &&
selectedValues.indexOf(restField.value) !== index}
// 判断该选项是否已选中,如果是,则禁用该选项
>
{optionsList.map((item) => (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
))}
</Select>
</Form.Item>
{/* 省略其他表单组件 */}
{fields.length > 1 && (
<Button type="link" onClick={() => {
remove(name);
const newSelectedValues = [...selectedOptions];
newSelectedValues.splice(index, 1);
setSelectOptions(newSelectedValues);
}}
>
删除
</Button>
)}
))}
</>
)}
</Form.List>