React Ant Design - 将表单项拆分为 2 列

Question

我是 Ant Design 的新手，想将表单组件内的表单项拆分为页面上的 2 列。我尝试使用 flex-box，但它不起作用。

正如您在我的代码中从他们的文档中看到的那样，有这个“formItemLayout”函数，但没有关于它的信息。不知道能不能用它来拆分它们

有没有办法让它们在页面上垂直分成两半（比如分成两列，每列占页面的 50%）

任何帮助将不胜感激。

import React from "react";

import { Form, Select, InputNumber, Input, Button, Upload, Space } from "antd";

import { UploadOutlined } from "@ant-design/icons";

const { Option } = Select;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 5,
  },
};

const normFile = (e) => {
  console.log("Upload event:", e);

  if (Array.isArray(e)) {
    return e;
  }

  return e && e.fileList;
};

const NewDevicePage = () => {
  const onFinish = (values) => {
    console.log("Received values of form: ", values);
  };

  return (
<div className="fnew-device-page-wrapper">
        <Form name="new-device-form" {...formItemLayout} onFinish={onFinish} hideRequiredMark >
          <Form.Item
            name={["user", "name"]}
            label="Name"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item name={["user", "url"]} label="URL">
            <Input />
          </Form.Item>

          <Form.Item
            name="type"
            label="Type"
            hasFeedback
            rules={[
              {
                required: true,
                message: "Please select the type of your device!",
              },
            ]}
          >
            <Select placeholder="Producer">
              <Option value="producer"> Producer </Option>
              <Option value="consumer"> Consumer </Option>
            </Select>
          </Form.Item>

          <Form.Item label="Price">
            <Form.Item name="price" noStyle>
              <InputNumber min={0} />
            </Form.Item>
          </Form.Item>

          <Form.Item label="Min balance">
            <Form.Item name="min-balance" noStyle>
              <InputNumber min={0} />
            </Form.Item>
          </Form.Item>

          <Form.Item
            name="device-image"
            label="Device image"
            valuePropName="fileList"
            getValueFromEvent={normFile}
            extra="No file selected"
          >
            <Upload name="logo" action="/upload.do" listType="picture">
              <Button>
                <UploadOutlined /> Select file
              </Button>
            </Upload>
          </Form.Item>

          <Form.Item name={["user", "location"]} label="Location">
            <Input />
          </Form.Item>

          <Form.Item
            name="network"
            label="Network"
            hasFeedback
            rules={[
              {
                required: true,
                message: "Please select the Network",
              },
            ]}
          >
            <Select placeholder="net1">
              <Option value="net1"> Network 1 </Option>
              <Option value="net2"> Network 2 </Option>
            </Select>
          </Form.Item>

          <Form.Item label="Minimum amount">
            <Form.Item name="min-offer-amount" noStyle>
              <InputNumber min={0} />
            </Form.Item>
          </Form.Item>

          <Form.Item
            wrapperCol={{
              span: 12,
              offset: 6,
            }}
          >
            <Button shape="round" type="primary" htmlType="submit">
              Add a device
            </Button>

            <Button shape="round" danger>
              Cancel
            </Button>
          </Form.Item>
        </Form>
      </div>
);
};

export default NewDevicePage;

Answer 1

我使用问题中提供的表单组件创建了这个sample app。虽然这在 UX 方面没有很好的格式，但它会帮助如何根据您的要求将表单元素格式化为 2 列。请看一下

我使用antd提供的Row、Col来格式化2列中的表单项。

希望这会有所帮助。