使用 React Antd 构建自定义属性生成表单

以下是一个使用 JavaScript React Antd 编写的表单，它包括属性名称、类型、属性生成器、生成最大值、生成最小值等参数，并拥有确定按钮靠右展示：

import React, { useState } from 'react';
import { Form, Input, Select, Button } from 'antd';

const { Option } = Select;

const FormComponent = () => {
  const [form] = Form.useForm();
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = () => {
    const values = form.getFieldsValue();
    setSubmitting(true);
    // TODO: 处理表单提交逻辑
  };

  return (
    <Form form={form} onFinish={handleSubmit} layout="vertical">
      <Form.Item
        name="name"
        label="属性名称"
        rules={[{ required: true, message: '请输入属性名称' }]}
      >
        <Input placeholder="请输入属性名称" />
      </Form.Item>
      <Form.Item
        name="type"
        label="类型"
        rules={[{ required: true, message: '请选择属性类型' }]}
      >
        <Select placeholder="请选择属性类型">
          <Option value="Input">Input</Option>
          <Option value="Select">Select</Option>
          <Option value="Checkbox">Checkbox</Option>
        </Select>
      </Form.Item>
      <Form.Item
        name="generator"
        label="属性生成器"
        rules={[{ required: true, message: '请选择属性生成器' }]}
      >
        <Select placeholder="请选择属性生成器">
          <Option value="Random">Random</Option>
          <Option value="Sequence">Sequence</Option>
          <Option value="Custom">Custom</Option>
        </Select>
      </Form.Item>
      <Form.Item
        name="maxValue"
        label="生成最大值"
        rules={[
          { required: true, message: '请输入最大值' },
          { type: 'number', message: '请输入数字' },
        ]}
      >
        <Input type="number" placeholder="请输入最大值" />
      </Form.Item>
      <Form.Item
        name="minValue"
        label="生成最小值"
        rules={[
          { required: true, message: '请输入最小值' },
          { type: 'number', message: '请输入数字' },
        ]}
      >
        <Input type="number" placeholder="请输入最小值" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" loading={submitting}>
          确定
        </Button>
      </Form.Item>
    </Form>
  );
};

export default FormComponent;