{...formItemLayout} 标签布局

最新推荐文章于 2025-05-21 14:46:08 发布

转载最新推荐文章于 2025-05-21 14:46:08 发布 · 7.9k 阅读

文章标签：

#javascript #ViewUI

本文详细介绍了在ReactJS中使用Form组件时如何通过formItemLayout属性进行灵活的表单布局，包括不同屏幕尺寸下的自动调整策略，以及如何利用Ant Design的Col组件设置span和offset值来精确控制标签和输入框的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

{...formItemLayout}是reactjs中属性的写法{...props},formItemLayout标签布局，wrapperCol需要为输入控件设置布局样式时，和label 标签布局，通 <Col> 组件，设置 span offset 值，如{span: 3, offset: 12}。

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 7 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
    md: { span: 10 },
  },
};

<FormItem {...formItemLayout} label="标题">
  {getFieldDecorator('title', {
    rules: [
      {
        required: true,
        message: '请输入标题',
      },
    ],
  })(<Input placeholder="给目标起个名字" />)}
</FormItem>

关注博主即可阅读全文