antd 表单校验、取值、重置

上次接触 React 是一年多以前了，再写的时候发现 antd 有了些改动。总结一下。

1. antd 表单取值和校验

ref={this.formRef}

首先要在表单上定义一个 ref。

formRef = React.createRef()

然后在 class 里面定义 formRef. 这个最好定义在比较靠前的位置，这样方便后面要用到的时候不会出现引用错误。

获取到 form 实例。这个地方代码我截掉了用不到的一段，这个 val 就是拿到的合法表单值。记得要写 catch ，因为 curForm 返回的是 Promise 对象，校验不通过又没有加 catch ,会容易在控制台报错。

handleAddOk = () =>{const form = this.formRef.current;const curForm = form.validateFields();curForm.then(val => {}).catch(errorInfo => {console.log(errorInfo);})}

2.表单重置

这个地方值得注意的有一点，就是如果表单放在弹窗里，那么重置的时候可能会报错。大意是说重置的对象不存在。因为如果 ref 是用到的时候才加载，所以想要在弹出之前重置就会出问题。

解决方案就是在 modal 添加 forceRender 。或者说在表单加载完成后在去进行重置。

<Modal title="添加标签组"  forceRender visible={isAddModalVisible} onOk={this.handleAddOk} onCancel={this.handleCancel}>

就在 Modal 上直接添加就好。

const form = this.formRef.current;
form.resetFields();

然后通过这两行代码进行表单重置。

antd 表单校验、取值、重置相关推荐

antd表单设置默认值
在下面这个地方设置 <Form.Item>{getFieldDecorator('username', {//这个地方initialValue:'Tom',rules: [{ requir ...
HTML给表单元素赋值,JQuery表单元素取值赋值方法总结
一.普通文本框的赋值与取值 1.1.1赋值 jQuery 表单元素取值与赋值方法总结 function get(){ var test1 = $("input.test1").va ...
java enctype_java里的enctype表单传输取值方法后端该怎么取值取值类型为string类型...
pageEncoding="UTF-8"%> /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional ...
angular ng-zorro 用组件自身方的法来重置表单校验
官网文档的API并没有提供对应的重置表单校验函数の说明,在控制台打印this.validateForm(校验表单对象) 往往我们只关注亮色函数.属性,而这次重置函数藏在__prop__中! 激动万分的 ...
elementUI From表单校验，整体校验和部分校验的使用方法
我们在开发中,有势会接到一种关于表单验证的需求,在对整体表单验证的同时也希望对单个表单进行验证,虽然官网都有api,但是为了让大家更为直观,这里小杰为了更为直观的理解做了总结. 本次涉及到的核心点 v ...
antd 表单提交，文件和表单内容一起提交，表单校验
用很简单的源码实现包含下列 antd 表单相关知识: 1.表单必填校验,规则校验 2.Upload 上传图片,获取上传图片的状态,如上传成功,上传失败,上传进度条,删除上传的文件 3.获取 Input ...
重置表单验证清除表单校验信息
重置表单验证清除表单校验信息提交表单验证的时间经常遇见的一个问题再次打开时表单验证依旧存在,这种就很烦,用户体验有点差, 在使用Vant或Element UI框架时经常会遇到,再次打开表单时,原 ...
antd如何获取表单的值_JavaScript多个表单序列化获取值
JavaScript多个表单序列化获取值获取数据格式如下: [{inid: "1231", age: "231231", sex: "123&quo ...
【前端3】jquary：页面加载，选择器，隔行换色，Dom，全选，动画，遍历，广告/抽奖，表单校验插件
文章目录 1.jquery框架引入:$("mydiv") 当成id选择器 2.jquery版本/对象:$(js对象) -> jquery对象 3.jquery的页面加载事件: ...

antd 表单校验、取值、重置

1. antd 表单取值和校验

2.表单重置

antd 表单校验、取值、重置相关推荐

最新文章

热门文章

antd 表单 校验、取值、重置

1. antd 表单取值和校验

2.表单重置

antd 表单 校验、取值、重置相关推荐

最新文章

热门文章

antd 表单校验、取值、重置

antd 表单校验、取值、重置相关推荐