React+Ant: Bucle los cuadros de selección en el formulario, y después de seleccionar una opción, el resto de los cuadros de selección deshabilitan la opción

 Implementación:

La idea es almacenar el valor seleccionado en un estado en el evento onChange del cuadro de selección. Luego, para cada cuadro de selección, juzgue si la opción del cuadro de selección está en el valor seleccionado al renderizar y, de ser así, deshabilite la opción.

Para la operación de eliminación, el valor eliminado se puede eliminar del valor seleccionado en el método de eliminación de Form.List para restaurar el estado seleccionable de la opción.

el código se muestra a continuación:

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