React Ant Design-将表单项目分为2列 [英] React Ant Design - Form items to be split into 2 columns

问题描述

我是Ant Design的新手，想将Form组件内的表单项拆分为页面上的2列.我尝试了flex-box，但无法正常工作.

I'm new to Ant Design and wanted to split my form items inside of the Form component into 2 columns on my page. I tried with flex-box and it's not working.

这里有"formItemLayout"您可以从他们的文档中的代码中看到它们的功能，但没有那么多的信息.我不知道我是否可以用它来分割它们

There's this "formItemLayout" function as you can see in my code from their documentation but there's not so info for it. I don't know if I can use it to split them

有什么方法可以将它们在页面上垂直分成两半(例如分成两列，每列占据页面的50％)

Is there any way to have them split into 2 halves on the page vertically (like into 2 columns, each taking 50% of the page)

任何帮助将不胜感激.

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;

推荐答案

我已经创建了这个

I have created this sample app with the form component provided in the question. Although this is not well formatted in terms of UX but then it'll help how the form elements can be formatted in 2 columns as per your requirement. Please have a look

我使用了antd提供的Row，Col来格式化2列中的表单项.

I have used Row, Col provided by antd for formatting the form items in 2 columns.

希望这会有所帮助.

这篇关于React Ant Design-将表单项目分为2列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！