React Ant Design - 要拆分为 2 列的表单项 [英] React Ant Design - Form items to be split into 2 columns
问题描述
我是 Ant Design 的新手，想将 Form 组件内的表单项拆分为页面上的 2 列.我试过使用 flex-box，但它不起作用.
有这个formItemLayout"；正如您在我的文档中的代码中所看到的那样，但没有关于它的信息.不知道能不能用它来分割它们
有没有办法让它们在页面上垂直分成两半(比如分成两列，每列占页面的50%)
任何帮助将不胜感激.
从反应"导入反应；import { Form, Select, InputNumber, Input, Button, Upload, Space } from "antd";从@ant-design/icons"导入 { UploadOutlined };const { 选项 } = 选择；const formItemLayout = {标签列:{跨度:6，},包装颜色:{跨度:5，},};const normFile = (e) =>{console.log("上传事件:", e);如果 (Array.isArray(e)) {返回 e;}退货&&e.fileList;};const NewDevicePage = () =>{const onFinish = (values) =>{console.log("收到的表单值:", values);};返回 (<div className="fnew-device-page-wrapper"><表单名称=新设备表单"{...formItemLayout} onFinish={onFinish} hideRequiredMark ><Form.Item名称={[用户"，名称"]}标签=名称"规则={[{要求:真实，},]}><输入/></Form.Item><Form.Item name={[user", url"]} label=URL"><输入/></Form.Item><Form.Item名称=类型"标签=类型"有反馈规则={[{要求:真实，消息:请选择您的设备类型！"，},]}><选择占位符=生产者"><选项值=生产者">生产者</Option><选项值=消费者">消费者</Option></Form.Item><Form.Item label=价格"><Form.Item name="price";noStyle><InputNumber min={0}/></Form.Item></Form.Item><Form.Item label=最低余额"><Form.Item name="min-balance";noStyle><InputNumber min={0}/></Form.Item></Form.Item><Form.Item名称=设备图像"标签=设备图像"valuePropName=文件列表"getValueFromEvent={normFile}extra=未选择文件"><上传名称=徽标"动作=/upload.do"listType=图片"><按钮><上传大纲/>选择文件</按钮></上传></Form.Item><Form.Item name={[user", location"]} label=Location"><输入/></Form.Item><Form.Item名称=网络"标签=网络"有反馈规则={[{要求:真实，消息:请选择网络"，},]}><选择占位符=net1"><选项值=net1">网络 1<选项值=net2">网络 2</Form.Item><Form.Item label="最低金额"><Form.Item name="min-offer-amount";noStyle><InputNumber min={0}/></Form.Item></Form.Item><Form.Item包装颜色={{跨度:12，偏移量:6，}}><按钮形状=圆形"类型=主要"htmlType="提交">添加设备</按钮><按钮形状=圆形"危险>取消</按钮></Form.Item></表格>);};导出默认的 NewDevicePage；
我已经创建了这个 示例应用 带有问题中提供的表单组件.尽管这在 UX 方面的格式不是很好，但是它将有助于如何根据您的要求将表单元素格式化为 2 列.请看一下
我使用了 antd 提供的 Row、Col 来格式化 2 列中的表单项.
希望这会有所帮助.
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.
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
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)
Any help would be appreciate.
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
I have used Row, Col provided by antd for formatting the form items in 2 columns.
Hope this helps.
这篇关于React Ant Design - 要拆分为 2 列的表单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
