React+Ant ：循环表单中的选择框，实现选择一个选项后，其余的选择框禁用该选项

本文链接：https://blog.youkuaiyun.com/m0_49623851/article/details/130641153

文章介绍了如何在React中使用Form.List和Select组件，通过onChange事件存储已选值，并在渲染时动态禁用已选中的选项。在删除操作时更新状态，恢复选项的可选性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现方法：

思路就是在选择框的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>