React Antd 表单组件：使用 Collapse 创建可折叠表单

以下是一个使用 JavaScript React Antd 写的表单，它由折叠面板包裹，包含名称、描述、语法、OID、允许修改属性和单值属性参数，以及删除和编辑按钮。

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

const { Panel } = Collapse;

const MyForm = () => {
  const [form] = Form.useForm();
  const [allowEdit, setAllowEdit] = useState(false);
  const [singleValue, setSingleValue] = useState(false);

  const handleDelete = () => {
    console.log('Delete button clicked');
  };

  const handleEdit = () => {
    console.log('Edit button clicked');
  };

  const handleAllowEdit = (checked) => {
    setAllowEdit(checked);
  };

  const handleSingleValue = (checked) => {
    setSingleValue(checked);
  };

  return (
    <Form form={form}>
      <Collapse defaultActiveKey={['1']}>
        <Panel header='Form' key='1'>
          <Form.Item label='Name'>
            <Input defaultValue='Name' disabled={true} />
          </Form.Item>
          <Form.Item label='Description'>
            <Input defaultValue='Description' disabled={true} />
          </Form.Item>
          <Form.Item label='Syntax'>
            <Input defaultValue='Syntax' disabled={true} />
          </Form.Item>
          <Form.Item label='OID'>
            <Input defaultValue='OID' disabled={true} />
          </Form.Item>
          <Form.Item label='Allow Edit'>
            <Switch onChange={handleAllowEdit} />
          </Form.Item>
          <Form.Item label='Single Value'>
            <Switch onChange={handleSingleValue} />
          </Form.Item>
          <Form.Item>
            <Button type='primary' danger onClick={handleDelete}>
              Delete
            </Button>
            {allowEdit && (
              <Button type='primary' onClick={handleEdit}>
                Edit
              </Button>
            )}
          </Form.Item>
        </Panel>
      </Collapse>
    </Form>
  );
};

export default MyForm;

在这个表单中，我们使用了 Form 组件和 Form.Item 组件来包装每个表单项，使其能够与 Form 组件一起工作。我们还使用了 Collapse 组件来创建一个折叠面板，用于包装整个表单。在每个表单项中，我们使用了 Input 组件来创建一个输入框，并设置 disabled 属性为 true，使其无法编辑。我们还使用了 Switch 组件来创建开关按钮，并为其设置 onChange 事件，以便在状态发生更改时更新相应的状态变量。最后，我们在表单的底部添加了删除和编辑按钮，并为其设置相应的点击事件处理程序 handleDelete 和 handleEdit。