React+Ant: フォーム内の選択ボックスをループし、オプションを選択した後、残りの選択ボックスでそのオプションを無効にします。

 実装：

このアイデアは、選択した値を選択ボックスの onChange イベントの状態に保存することです。次に、選択ボックスごとに、レンダリング時に選択ボックスのオプションが選択値にあるかどうかを判断し、選択値に含まれている場合はそのオプションを無効にします。

削除操作の場合、Form.List の delete メソッドで選択された値から削除された値を削除し、オプションの選択可能な状態を復元できます。

コードは以下のように表示されます:

// 在组件中定义已选中的值的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>