React antd表单控件+栅格系统控制label长度

import React from 'react'
import moment from 'moment';//cnpm i moment --save
import { Card, Form, Input, Button, Checkbox, Radio, Select, Switch, DatePicker, TimePicker, Upload, Icon, message, InputNumber } from 'antd'
const { Option } = Select;
const { TextArea } = Input;

export default function FormRegister() {

  const formItemLayout = {
    labelCol: {//label占比 当屏幕为xs最小像素时 当屏幕为sm大于小像素时
      xs: 24,
      sm: 2
    },
    wrapperCol: {//input框占比
      xs: 24,
      sm: 10
    }
  }
  const rowObject = {
    minRows: 4,
    maxRows: 6
  }

  //获取表单节点
  const formRef = React.createRef()
  //校验
  const onCheck = async () => {
    try {
      const values = await formRef.current.validateFields();
      console.log('Success:', values);
      message.success(`恭喜你，${values.username},提交校验成功,密码为${values.password}`)
    } catch (errorInfo) {
      console.log('Failed:', errorInfo);
      message.warn('提交校验失败')
    }
  }


  return (
    <div style={{ width: "100%" }}>
      <Card title="注册表单">
        <Form layout="horizontal"
          ref={formRef}>
          {/* label的值出现在input框前 */}
          <Form.Item
            {...formItemLayout}
            label="用户名"
            name="username"
            initialValue=""
            rules={[
              {
                required: true,
                message: 'Please input your Username!',
              }
            ]}>
            <Input
              placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label="密码"
            name="password"
            initialValue=""
            rules={[
              {
                required: true,
                message: 'Please input your Password!',
              }
            ]}>
            <Input
              type="password"
              placeholder="请输入密码" />
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label="性别"
            name="sex"
            initialValue="1">
            <Radio.Group>
              <Radio value="1">男</Radio>
              <Radio value="2">女</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label="年龄"
            name="age"
            initialValue="18">
            <InputNumber></InputNumber>
          </Form.Item>
          {/* 下拉框 */}
          <Form.Item
            {...formItemLayout}
            label="当前状态"
            name="state"
            initialValue="2">
            <Select>
              <Option value="1">咸鱼一条</Option>
              <Option value="2">风华浪子</Option>
              <Option value="3">北大才子</Option>
              <Option value="4">FE</Option>
              <Option value="5">创业者</Option>
            </Select>
          </Form.Item>
          {/* 多选下拉框 */}
          <Form.Item
            {...formItemLayout}
            label="爱好"
            name="interest"
            initialValue={["1", "2"]}>
            <Select mode="multiple">
              <Option value="1">游泳</Option>
              <Option value="2">篮球</Option>
              <Option value="3">足球</Option>
              <Option value="4">跑步</Option>
              <Option value="5">爬山</Option>
            </Select>
          </Form.Item>
          {/* switch开关 */}
          <Form.Item
            {...formItemLayout}
            label="是否已婚"
            name="isMarried"
            valuePropName="checked"
            initialValue="true">
            <Switch />
          </Form.Item>
          {/* 日期选择器 */}
          <Form.Item
            {...formItemLayout}
            label="生日"
            name="birthday">
            <DatePicker
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              defaultValue={moment('2022-01-01')}>
            </DatePicker>
          </Form.Item>
          {/* 地址 */}
          <Form.Item
            {...formItemLayout}
            label="联系地址"
            name="address"
            initialValue="北京市海淀区奥林匹克公园">
            <Input.TextArea
              autoSize={rowObject}
            />
          </Form.Item>
          {/* 提交 */}
          <Form.Item>
            <Button type="primary" htmlType="submit"
              onClick={onCheck}>
              注册
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}