首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React登录和注册表单ant设计onFinish未触发

React登录和注册表单ant设计是基于React框架开发的一种用户登录和注册表单的设计方案,使用了ant设计组件库来实现界面的构建和样式的美化。

在React中,表单的提交通常会使用<form>标签来包裹输入框和提交按钮,并通过监听onSubmit事件来处理表单的提交。而在ant设计中,可以使用Form组件来快速构建表单,并通过设置onFinish属性来指定表单提交时的回调函数。

然而,当使用ant设计的表单组件时,有时会遇到onFinish未触发的情况。这可能是由于以下几个原因导致的:

  1. 表单组件未正确包裹在<Form>组件中:确保所有的表单输入项都被正确地包裹在<Form>组件中,例如:
代码语言:txt
复制
<Form onFinish={handleFinish}>
  <Form.Item name="username" label="用户名">
    <Input />
  </Form.Item>
  <Form.Item name="password" label="密码">
    <Input.Password />
  </Form.Item>
  <Button type="primary" htmlType="submit">提交</Button>
</Form>
  1. 表单项的name属性未设置或设置错误:确保每个表单项都设置了唯一的name属性,并且与回调函数中的参数名称一致,例如:
代码语言:txt
复制
<Form.Item name="username" label="用户名">
  <Input />
</Form.Item>
  1. 表单项的rules属性未设置或设置错误:如果在表单项中设置了验证规则,确保rules属性被正确地设置,例如:
代码语言:txt
复制
<Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>
  <Input />
</Form.Item>
  1. 表单组件未正确引入或版本不匹配:确保正确引入了ant设计的表单组件,并且版本与项目中的其他依赖相匹配,例如:
代码语言:txt
复制
import { Form, Input, Button } from 'antd';

总结: React登录和注册表单ant设计中,当onFinish未触发时,需要检查表单组件的正确包裹、表单项的name属性设置、验证规则的rules属性设置以及引入的组件是否正确。以上是一些常见的可能原因,具体情况需要根据实际代码进行排查。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云数据库(TencentDB)可以用于支持React应用的部署和数据存储。您可以访问腾讯云官网了解更多关于腾讯云产品的信息:腾讯云官网

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

天天用 antd 的 Form 组件?自己手写一个吧

大家写中后台系统的时候,应该都用过 Ant Design 的 Form 组件: 用 Form.Item 包裹 Input、Checkbox 等表单项,可以定义 rules,也就是每个表单项的校验规则。...每个表单项都有 value onChange 参数,我们只要在 Item 组件里给 children 传入这俩参数,把值收集到全局的 Store 里。...然后添加 setValues 来修改 values onValueChange 监听 value 变化 validateRegister 用来注册表单项的校验规则,也就是 rules 指定的那些。...比如这种就不需要包装: 创建两个 state,分别存储表单值 value error。...核心就是一个 Store 来保存表单的值,然后用 Item 组件包裹具体表单,设置 value onChange 来同步表单的值。

24810
  • antd4与antd3Form表单设计区别

    核心 antd3思想:使用HOC(高阶组件)包裹form表单,HOC组件中的state存储所有的value值,定义设置值获取值的方法 缺点:动一发牵全身,一个value值改变,因为这是顶级状态,所以所有的子组件都会因父组件的重新...render而render,浪费了性能 antd4思想:使用Context 包裹form表单,自定义一个store类,存储所有的表单value值,定义设置值获取值得方法,因为不是组件内部状态,需要自己定义更新函数...(个人觉得这个思想类似Vue了,涉嫌抄袭) ant4简单原理展示 基本用法,拷贝整理下可测试 //FormPage页面 函数组件类组件略有差异,类组件会用到神奇的React.forwardRef...api useImperativeHandle hook8l import React, { useEffect, Component } from 'react' import Input from...FormItem组件 register = (item) => { this.formItems.push(item) // 有注册有取消,返回一个取消注册方法在组件

    2K20

    Mock17-Antd高级模板组件ProComponents

    对象中必须要有 data success,如果需要手动分页 total 也是必需的。request 会接管 loading 的设置,同时在查询表单查询时 params 参数发生修改时重新执行。...同时查询表单的值 params 参数也会带入。...常用属性 params 用于 request 查询的额外参数,一旦变化会触发重新加载 columns 表格列配置内部值的绑定与属性设置 actionRef Table action 的引用,便于自定义触发...formRef 是否显示搜索表单,传入对象时为搜索表单的配置 search 是否显示搜索表单,传入对象时为搜索表单的配置 onSubmit 提交表单触发 其他属性参数配置,参考之前讲解的antd组件使用方式.../Interface/index.tsx // @ts-ignore import React from "react"; import { ProTable, ProColumns} from '@ant-design

    32610

    简洁设计-毛玻璃效果登陆页面

    我们先看看实现的效果: 设计的初衷: 1. 简洁清爽 2. 重点突出 整个页面使用了一个渐变的背景色(这里直接使用了图片),重要的内容居中显示,条款等内容右下角小字展示;整个站点以拂晓蓝色调为主。...整个项目因为使用的是react ant design这种成熟的框架,所以几乎不需要自己额外写很多的样式。 具体的框架结构不在本文涉及。...登陆界面的代码如下: import { useState } from "react"; import * as React from "react"; import BlankLayout from...const onFinishFailed = () => { notification.open({ message: '登陆失败', description: '请您完善表单...下图更能体现这种效果: image.png 这些显著的特点使用户能更好的建立界面的深度层次感。因为它玻璃状的外观,业内称之为毛玻璃效果(glassmorphism)。

    1.2K20

    带你用React从零实现一个Antd4 Form表单

    但是我们需要考虑的一点就是,如果这些input、radio组件等都各自管理自己的state,那么Form表单提交的时候,怎么做统一的收据收集呢,毕竟校验提交Form表单的时候需要获取Form表单中全部的数据...,得有取消注册, // 订阅取消订阅也是要成对出现的 registerFieldEntities = (entity) => { this.fieldEntities.push(entity...perfect~ 表单校验 到现在为止,我们还没有提交表单,提交前我们首先要做表单校验。表单校验通过,则执行onFinish,失败则执行onFinishFailed。...完成表单校验之后,接下来我们要在FormStore中实现表单提交方法,即onFinish与onFinishFailed方法。...我个人的话,前不久写可视化编辑器的时候,就参考这个Form表单,然后没有用reduxmobx,而是自己实现了一个数据状态管理库,算是学以致用了。

    1.3K20

    react+koa2+mongodb实现留言功能(可体验)

    前端实现 使用技术 react ant design typescript 在上面的截图中,很明显,就是一个表单设计,外加一个列表的展示。...表单设计使用了ant design框架自带的form组件: <Form {...layout} form={form} name="basic" onFinish={onFinish}...如果你纵览上面的代码片段,你会发现里面有一个Form表单。 是的,其Form表单就是给留言使用的,其结构仅仅是剔除了主题留言中的subject字段输入框,但是实际传参我还是会使用到。...default: Date.now() } } }) mongoose.model('Message', MessageSchema) 这里有个注意的点userId字段,这里我直接关联了注册的用户...本篇的重点是,对评论的话题留言,如何转换成两层的树型结构呢? 这就是涉及到了pid这个字段,也就是父节点的id: 话题的pid为-1,话题下留言的pid为话题的记录值。

    1.1K10

    10分钟精通Ant Design Form表单

    本文适合React、Vue开发者阅读,10分钟不够?那就再加10分钟。 被人诟病的Form antd被人吐槽最多的除了彩蛋之外,那应该就是Form表单了。...自身状态改变了 所以进一步讲,包装组件的目的就是为了被包装组件的父组件更新,一旦被getFieldDecorator修饰过的组件触发onChange事件,便会触发这个父组件的的更新(forceUpdate...Vue版Form的进化史 起初我们使用了React版一致的写法,必须使用Form.create包裹组件,但vue推崇的template语法很难再去使用,你不得不去在Vue中使用JSX,遭到了用户的各种吐槽...}]} ]"/> 校验收集React版没有区别,都只是"实例"的方法。 为什么不支持双向绑定 严格来说并不是完全不支持,如果你不需要Form的自动收集、校验功能,是可以使用双向绑定的。...而如果使用ant-design-vue单项数据流的方式,数据之间的流向就变得非常清晰,表单就像一个独立的沙盒,不管沙盒中的数据如何变化,都不会影响到沙盒的外部,而沙盒通过相关API方法外部进行交互。

    2.7K30

    大厂都在用的一款表单解决方案

    特点 内置组件丰富:内置组件非常丰富,包括基础组件、嵌套卡片类组件动态增减 List 组件等,可以满足大多数场景的表单实现需求。...扩展性强:具有非常强的扩展性,支持自定义各种类型的表单控件,用户可以根据实际需要进行定制,非常灵活。 易于使用:容易上手,可以通过表单设计器可视化拖拽的方式快速生成表单。...使用 安装 npm install form-render --save 引入使用,以创建一个表单为例 import React from 'react'; import FormRender,...={onFinish} footer={true} /> ); } 表单设计器 对于一些自定义的表单样式,可以使用表单设计器进行自定义设计,拖拽导出 schema,丢到代码里生成可用表单...FormRender 还内置了许多高级功能:表单布局、表单联动、表单校验、常用交互、数据转换、自定义组件 等 其中内置的方法功能大幅提高中后台系统中的表单开的灵活性,让开发者省略从头编写表单组件的繁琐步骤

    64640

    类型即正义:TypeScript 从入门到实践(序章)

    提示Ant Design [19]是蚂蚁金服孵化的一套企业级产品设计体系,提供了完备的 TS 类型定义,使得我们可以很方便的在 TS 项目中使用,在最近发布了 4.0 版本,致力于创造高效愉悦的工作体验...Mobile[21] 开箱即用的中台前端/设计解决方案:Ant Design Pro[22] 插画设计:海兔[23] 一款为设计者提升工作效率的 Sketch 工具集 :Kitchen[24] 后面图雀社区计划围绕...Ant Design 生态撰写一系列教程,帮助大家提高设计、开发效率,敬请期待!...自此,我们就引入了 antd 组件库,并进行了按需配置使用以及配置主题色使用了 Ant Design 最新的暗色主题 -- Dark Mode。...antd 组件库,并使用 react-app-rewired 替换默认的 react-scripts 来完成对 CRA 的 Webpack 配置进行修改,以是我们可以获得 antd 组件的按需引用主题定制的功能

    1.5K20

    react hook+ts+rouerV6 dev notes

    其实就是Form.Item里面套一个Input.group 然后再套Form.item就可以了,验证独自给form.item加上rules即可 参考文档:https://ant.design...product={product} closeModal={closeModal} /> 挂载      <Form         ref={formRef}       > 关闭dialog时重置表单...componentWillReceiveProps   useEffect(() => {     _getRequests()   }, [filterArgs]) filterArgs就是我们要传递的Props,如果这个传递的值更新了 就会触发...unclick: 图片 click: 图片 非常简单,想复杂了 11.antd-form 自定义校验 需求就是我们的验证码组件需要校验 可以用到form的自定义检验(就是拿到form的value验证码...transition: width 0.5s ease;     }     a:hover:after {       width: 100%;     } 13.使用useMediaQuery来判断pcmobile

    2.4K10

    Hooks + TS 搭建一个任务管理系统(一)-- 登录注册页面

    注册新账号'} 这个是登录注册切换的按钮,当点击这个按钮时,会触发 setIsRegister 改变 isRegister 的值,我们通过这个值的 true or false 来判断展示的内容...'请注册' : "请登录" } {/* 判断展示登录页面还是注册页面 */} {...(0,0,0,0.1) 0 0 10px; text-align: center; ` 在 emotion 中,想要个 Antd 组件添加样式,我们只需要用 styled(组件名) 即可 对于登录注册页面...,采用的是 Antd 中的 Form 表单实现的,在控制好盒子大小后,基本不需要过多的布局 <Form.Item name={'username...,会触发 Form 组件中的 onFinish 事件,我们给他绑定了一个 handleSubmit 方法,用于发送请求 const handleSubmit = async (values: { username

    1.4K11

    浅谈表单受控性及结合Hooks应用

    在本文中将介绍在 React 中受控非受控表单是如何使用的,以及现代化使用 hooks 来管理 form 状态。...2 受控非受控表单差异 2.1 受控表单的特点使用场景 受控表单是指表单元素的值受 React 组件的 state 或 props 控制。...到 ant4 的差异为例 antd3 中form 组件设计思想: 使用HOC(高阶组件)包裹 form 表单,HOC 组件中的 state 存储所有的控件 value 值,定义设置值获取值的方法 存在缺陷...: 由于 HOC 的设计 ,state 存于顶级组件,即便只有一个表单控件 value 值改变,所有的子组件也会因父组件 rerender 而 render,浪费了性能 总结: ant3 时代的 form...另外区别于 ant3 中 HOC 形式包裹的控件,rc-form-field 中提供的独立的 Field 组件概念对应的 hooks,提供对控件本身直接操作的可能 4 不走寻常路的 react-hook-form

    31810

    React 16.x折腾记 - (6) 基于React 16.x+ Antd 3.x封装的一个声明式的查询组件(实用强大)

    ,大于则显示(点击直接取数据源的长度) 传递子组件作为搜索按钮区域 统一变动控件的规格 重置表单 子组件引入自身响应式条件(会话状态,按钮太多,等分会造成各种换行,不舒服) 非Input的控件,自动触发表单提交...,聚合所有表单数据(自动双向绑定,设置默认值等); 为了降低复杂度,子组件不考虑dva来维护状态,纯靠propsstate构建,然后统一把构建的表单数据向父级暴露.....resetSearchForm 函数 回调函数,当重置表单数据的时候 autoSearch 布尔值 启动非input的控件自动触发提交的props函数 数据源格式 data的数据格式基本antd要求的格式一致...* @Description: 列表表单查询组件 */ import React, { PureComponent } from 'react'; import { Form, Row,...props, changedValues, allValues) => { const { data, autoSearch } = props; // 传入的空间必须存在, 否则不可能触发自动提交表单

    14610

    最熟悉的陌生人 rc-form

    我们也许会经常使用例如 Ant Design、Element UI、Vant 等第三方组件库来快速在项目中完成页面的布局效果简单的交互功能。...正如我们使用频率很高的 Ant Design 中的 Form 组件(这里我说的是 React 版本的)。...“我们都知道 React 框架设计模式 Vue 不同,Vue 中作者已经帮我们实现了数据的双向绑定,数据驱动视图,视图驱动数据的改变,但是 React 中需要我们手动调用 setState 实现数据驱动视图的改变...其实还是需要我们自己了解 rc-form 的设计思路的;只有了解了这些优秀开源作品的精髓,我们即使不用开源库,也可以封装自己的代码库以及类似 Ant Design 中 Form 这些优秀的组件的。...props rules 校验的规则 trigger 触发数据收集的时机 默认 onChange validate 校验规则触发事件 valuePropName 子节点的值的属性,例如 checkbox

    1.1K20

    Hooks + TS 搭建一个任务管理系统(三)-- 项目列表功能模块

    ={onFinish} > {/* 节省篇幅,此处省略了名称、部门负责人的 form.Item */} {/* 点击提交触发onFinish方法 */} <Button...中调用即可 当 form 表单成功提交时,会自动调用 onFinish 方法,同时会将 form 表单中的数据作为参数,因此我们采用 useMutateProject 这个 hook 来将数据维护到...useAddProject,接下来我们就讲讲这两个 hook tips:form.resetFields 方法可以重置表单,也就是一个清空表单的效果 2....实现编辑,创建功能 我们在点击编辑按钮时,首先需要弹出 modal 编辑信息点击保存后,才需要调用发送请求 上代码 首先先处理 modal 的显示关闭 (截取下拉框的关键代码)我们在点击编辑按钮时,会触发

    1.2K30
    领券