如何将 Ant Design 的 Form 组件中的 Submit 按钮组排列在右侧？

Ant Design（简称 AntD）是一套广受欢迎的基于 React 的 UI 库，以其丰富的组件和优雅的设计著称。在开发过程中，我们经常需要根据业务需求调整组件的布局。其中，Form 组件的按钮排列是一个常见的需求。本文将详细介绍如何将 Ant Design 的 Form 组件中的 Submit 按钮组排列在右侧。

Form 组件的基本结构

在 AntD 中，Form 组件通常由 Form 和FormItem两个主要组件构成。Form组件用于包裹整个表单，而 FormItem 组件则用于定义表单内的单个元素。每个 FormItem 通常包含一个 label 和一个输入控件，如 Input、Select 等。

按钮组排列的默认行为

在默认情况下，Form 组件中的 Submit 按钮（通常使用 Button 组件）会按照 HTML 的自然顺序排列，这意味着如果你在 Form 组件的最后添加一个 Button 组件，它就会显示在表单的左侧。这是因为 Form 组件的默认对齐方式是左对齐。

将 Submit 按钮组排列在右侧

要将 Submit 按钮组排列在右侧，我们可以利用 Flexbox 布局的特性。Flexbox 是一种响应式布局模型，可以轻松地实现元素的水平或垂直布局。在 AntD 中，Form 组件和 FormItem 组件都支持 Flexbox 布局。

以下是步骤：

1. 设置 Form 组件的布局 ：首先，我们需要将 Form 组件的布局设置为 Flexbox。这可以通过设置layout 属性为 horizontal 或vertical来实现。在本例中，我们使用horizontal。

2. 调整 FormItem 的样式 ：接下来，我们需要调整 FormItem 的样式，使其占据整个 Form 的宽度。这可以通过设置 FormItem 的style 属性来实现。

3. 将 Button 组件包裹在 FormItem 中 ：为了使按钮组排列在右侧，我们需要将 Button 组件包裹在一个新的 FormItem 中，并设置其style 属性，使其右对齐。

下面是代码示例：

“`jsx
import React from ‘react’;
import {Form, Button} from ‘antd’;

const MyForm = () => {
const [form] = Form.useForm();

const onFinish = (values) => {
console.log(values);
};

return (

  <Form.Item style={{textAlign: 'right'}}>
    <Button type="primary" htmlType="submit">
      提交
    </Button>
    <Button style={{marginLeft: 8}} onClick={() => form.resetFields()}>
      重置
    </Button>
  </Form.Item>
</Form>