使用antdDesignPro创建分步表单

雁落成空

已于 2023-04-11 17:42:42 修改

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript react

于 2023-04-03 14:38:21 首次发布

本文链接：https://blog.csdn.net/qq_35191010/article/details/129928895

本文介绍了如何使用antdDesignPro创建分步表单，包括StepsForm的原理和如何利用submitter的render函数自定义表单按钮。内容详细展示了从创建到运行的效果，包括三个步骤：分布表单的构建、自定义表单按钮以及运行后的视觉呈现。

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

一、分布表单StepsForm

StepsForm 通过 Provider 来管理子表单的数据，每个子表单都是完整的数据，在 StepsForm 组合成最后的数据。同时自带了一个进度条，和管理进度条的相关 API。

二、创建分布表单

应用submitter 中的render函数，自定义分布表单按钮，

render: (props) => {
                    console.log('props:', props)

                    if (props.step === 0) {
                        return (
                            <Button type="primary" onClick={() => props.onSubmit?.()}>
                                去第二步 {'>'}
                            </Button>
                        );
                    }

                    if (props.step === 1) {
                        return [
                            <Button key="pre" onClick={() => props.onPre?.()}>
                                返回第一步
                            </Button>,
                            <Button type="primary" key="goToTree" onClick={() => props.onSubmit?.()}>
                                去第三步 {'>'}
                            </Button>,
                        ];
                    }

                    return [
                        <Button key="gotoTwo" onClick={() => props.onPre?.()}>
                            {'<'} 返回第二步
                        </Button>,
                        <Button type="primary" key="goToTree" onClick={() => props.onSubmit?.()}>
                            提交 √
                        </Button>,
                    ];
                },

源码展示如下：

import {
    PageContainer,
    FooterToolbar,
    ProForm,
    ProFormSelect,
    ProFormText,
    ProFormDependency,
    StepsForm,
    ProFormCheckbox
} from '@ant-design/pro-components';

import { Card, Form, Button, message } from 'antd';
import React, { useEffect, useState } from 'react';

const StepForm = () => {
    return <PageContainer>
        <StepsForm
            onFinish={(val) => {
                console.log('val:', val)
                message.success('提交成功')
                //如果有返回值为true,点击最后一步的提交按钮之后，则返回至第一步
                return true
            }}
            submitter={{
                render: (props) => {
                    console.log('props:', props)

                    if (props.step === 0) {
                        return (
                            <Button type="primary" onClick={() => props.onSubmit?.()}>
                                去第二步 {'>'}
                            </Button>
                        );
                    }

                    if (props.step === 1) {
                        return [
                            <Button key="pre" onClick={() => props.onPre?.()}>
                                返回第一步
                            </Button>,
                            <Button type="primary" key="goToTree" onClick={() => props.onSubmit?.()}>
                                去第三步 {'>'}
                            </Button>,
                        ];
                    }

                    return [
                        <Button key="gotoTwo" onClick={() => props.onPre?.()}>
                            {'<'} 返回第二步
                        </Button>,
                        <Button type="primary" key="goToTree" onClick={() => props.onSubmit?.()}>
                            提交 √
                        </Button>,
                    ];
                },
            }}
        >
            <StepsForm.StepForm title='创建实验'>
                <ProFormText
                    name="name"
                    label="实验名称"
                    width="md"
                    tooltip="最长为 24 位，用于标定的唯一 id"
                    placeholder="请输入名称"
                    rules={[{ required: true }]}
                />
            </StepsForm.StepForm>

            <StepsForm.StepForm title='设置参数'>
                <ProFormCheckbox.Group
                    name="checkbox"
                    label="部署单元"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                    options={['部署单元1', '部署单元2', '部署单元3']}
                />
            </StepsForm.StepForm>
            <StepsForm.StepForm title='发布实验' onFinish={(value) => {
                console.log('提交数据：', value)
            }}>
                <ProFormSelect
                    label="Pod 调度策略"
                    name="remark2"
                    initialValue="2"
                    options={[
                        {
                            value: '1',
                            label: '策略一',
                        },
                        { value: '2', label: '策略二' },
                    ]}
                />
            </StepsForm.StepForm>

        </StepsForm>
    </PageContainer>
}

export default StepForm