React Form Item

问题根源

在原代码中，Form.Item 的子组件是 Space，而不是直接的 Select。这导致 Form.Item 无法正确地将表单数据传递给 Select 组件。

<Form.Item>
    <Space>
        <Select />
        <Button />
    </Space>
</Form.Item>

修复方法

• 将 Select 组件直接作为 Form.Item 的子组件，而不再嵌套在 Space 中
• 将删除按钮，改为单独的 Button 组件并放在 Form.Item 之外
• 如果不想把 Button 放到 Form 之外，可以使用自定义组件

为什么

• 在 Ant Design 的 Form 组件中，Form.Item 会自动为其直接子组件提供以下功能：
• 自动设置子组件的 value 属性（从表单数据中取值）
• 自动绑定 onChange 事件（更新表单数据）
• 自动处理表单验证
• 当 Select 是 Form.Item 的直接子组件时，Form.Item 可以正确控制 Select 的值
• Form.Item 的 name 属性 [name, 'severity'] 能正确索引到 Form.List 中的数据
• Select 是 Form.Item 的直接子组件，可以接收到正确的值
• 当编辑表单时，form.setFieldsValue 设置的值会正确传递给 Select

通过这个修改，当点击编辑时，告警条件中的 severity 下拉框应该能正确显示数据了。

自定义组件

const SelectWithButton: React.FC<{
  value?: number;
  onChange?: (value: number) => void;
  onDelete: () => void;
  options: { label: string; value: number }[];
  placeholder?: string;
  style?: React.CSSProperties;
}> = ({ value, onChange, onDelete, options, placeholder, style }) => (
  <Space align="baseline">
    <Select
      value={value}
      onChange={onChange}
      options={options}
      placeholder={placeholder}
      style={style}
    />
    <MinusCircleOutlined
      onClick={onDelete}
      style={{ color: '#ff4d4f' }}
    />
  </Space>
);

<Form.Item>
    <SelectWithButton>
</Form.Item>