React Antd 表单组件：使用 Collapse 包裹并实现编辑和删除功能

以下是使用 JavaScript React Antd 编写的表单，表单由折叠面板包裹，包含名称、描述、语法、OID、允许修改属性和单值属性参数：

import React, { useState } from 'react';
import { Collapse, Input, Switch, Button, Form } from 'antd';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';

const FormItem = Form.Item;

const MyForm = () => {
  const [editable, setEditable] = useState(false);

  const handleEdit = () => {
    setEditable(true);
  };

  const handleDelete = () => {
    // TODO: Delete the form item
  };

  const handleSave = (values) => {
    // TODO: Save the form item
    setEditable(false);
  };

  return (
    <Form onFinish={handleSave}>
      <Collapse defaultActiveKey={['1']}>
        <Collapse.Panel header='表单' key='1'>
          <FormItem label='名称' name='name'>
            <Input disabled={!editable} />
          </FormItem>
          <FormItem label='描述' name='description'>
            <Input disabled={!editable} />
          </FormItem>
          <FormItem label='语法' name='syntax'>
            <Input disabled={!editable} />
          </FormItem>
          <FormItem label='OID' name='oid'>
            <Input disabled={!editable} />
          </FormItem>
          <FormItem label='允许修改属性' name='allowEdit'>
            <Switch disabled={!editable} />
          </FormItem>
          <FormItem label='单值属性' name='singleValue'>
            <Switch disabled={!editable} />
          </FormItem>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Button
              type='primary'
              htmlType='submit'
              style={{ marginRight: 16 }}
              disabled={!editable}
            >
              保存
            </Button>
            {editable ? (
              <>
                <Button
                  icon={<DeleteOutlined />}
                  onClick={handleDelete}
                  style={{ marginRight: 8 }}
                >
                  删除
                </Button>
                <Button icon={<EditOutlined />} onClick={handleEdit}>
                  编辑
                </Button>
              </>
            ) : (
              <Button icon={<EditOutlined />} onClick={handleEdit}>
                查看
              </Button>
            )}
          </div>
        </Collapse.Panel>
      </Collapse>
    </Form>
  );
};

export default MyForm;

在上述代码中，我们使用了 Collapse 组件来包裹整个表单，其中 FormItem 组件用于渲染每个表单项，包含一个 label 和一个 Input 或 Switch。我们还添加了三个按钮：保存、删除和编辑/查看，其中删除和编辑按钮在编辑模式下显示，查看模式下只显示编辑按钮。我们还使用了 useState 钩子来管理表单的可编辑状态。