items配置选项卡内容StepItem[]4.24.0 type="inline" 参数说明类型默认值版本 className步骤条类名string- current指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过status属性覆盖状态number0 initial起始序号,从 0 开始记数number0 status指定当前步骤的状态,可选waitprocessfinisherrorstringprocess ...
使用StepsForm - 分步表单,将每一步封装成一个组件,传入的参数后将传入的参数自动到form元素下导致控制台出现错误问题📷 复现步骤直接通过控制台查看stepForm的form元素, 就会发现被自动注入了传入的参数, 并且会出现以下的报错🏞 期望结果希望传入的参数不在自动注入form元素下💻 复现代码const ContractModuleStep...
import React, { Component } from 'react'; import { Steps, Button, message } from 'antd'; import { StepsForm } from '@ant-design/pro-form'; import ProForm, { ProFormText } from '@ant-design/pro-form'; const { Step } = Steps; class MyStepForm extends Component { formRef = Reac...
StepsForm 和 Modal 配合使用时,Modal 取消后表单无法不能回到第一步。后来尝试用 current 参数控制 step,思路是给每个 StepForm 配置 onFinish 参数,中间每个 StepForm 提交时 current + 1,由于是 current 控制 step,所以最后一个 StepForm 提交时 current 置为 0,Modal onCancel 时 current 置为 0;另外还需...
path: 'step-form', }, { name: '高级表单', authority: 'admin', // 配置准入权限 path: 'advanced-form', }], } 2.2.2、控制路由导向 与菜单控制类似,路由权限的配置也很简单: // src/common/router.js '/dashboard/analysis': { component: dynamicWrapper(app, ['chart'], () => import('...
}from '@ant-design/pro-components'; import {Button, Divider, Drawer, message }from 'antd'; import React, {useRef, useState }from 'react'; import CreateFormfrom './components/CreateForm'; import UpdateForm, { FormValueType }from './components/UpdateForm'; ...
<Step title="确认转账信息" /> <Step title="完成" /> </Steps> {children} // 可直接写为三个状态对应的三个表单子组件 </Fragment> </Card> </PageHeaderWrapper> ); } } 有个疑问:框架自带Mock页面Form->StepForm->index.js、step1.js、step2.js、step3.js实现切换表单的方式还没弄明白。。
我使用的是Ant Design Pro,自己添加了一个模块,目录结构如下,路由相关配置请查看官方文档页面添加编辑删除2.index.jsximport React, { Component } from 'react'; import { Button, Form, Table, Popconfirm, Row, Col, message, } from 'antd';
先看下Ant Design官网上给出的表单组件用法: 1import React, { Component } from 'react'2import { Form, Icon, Input, Button } from 'antd'34functionhasErrors(fieldsError) {5returnObject.keys(fieldsError).some(field =>fieldsError[field])6}78class HorizontalLoginForm extends React.Component {9compo...
如果要验证每个步骤，则需要为每个步骤显示不同的带有规则的Form.Item，并使用表单钩子form..validateFields...