关于antd form表单getFieldsError方法

getFieldsError()方法其实只有required:true时,双向数据绑定。 {getFieldDecorator('note', { rules: [{ required: true, message: 'Please input your note!' }], })(<input/>)}
遇到一个需求,表单没有填写任何搜索条件搜索按钮置灰; 做法如下:
import React, { Component } from 'react';
import {Form, Input, Select, Row, Col, DatePicker, Checkbox, Spin,Button} from 'antd';
class componentName extends Component {
hasErrors =()=>{
const objKeys = Object.keys(fieldsError); const errArr = objKeys.filter(item => ['undefined', '', 'false'].includes('' + fieldsError[item])); return errArr.length >=14 ;
}
render() {
const {form: {getFieldDecorator, getFieldsValue}, advancedSearchOk,visiblebtn} = this.props;
return (
<div className={`${style.advanced_search_position_wrapper} ${visiblebtn ?style.wid90:''}`}>
<Form onSubmit={this.handleSubmit} onKeyDown={(e) => e.keyCode === 13 && advancedSearchOk()}>
<Row>
<Col span={18}>
<Form.Item {...formItemLayout3} label="关键字">
{getFieldDecorator('keyword', {
rules: [{required: false, message: '请输入关键字'}],
})(
<Input placeholder="多个条件请使用空格分开:客户ID/客户公司/集团" autoComplete="off"/>
)}
</Form.Item>
</Col>
{/* ....还有很多类似Form.Item */}
{visiblebtn?(<Col span={24}>
<div className='right'>
<Button onClick={this.handleFormReset}>重置</Button><Button style={{marginLeft: 8}} type="primary" onClick={this.handelResult} disabled={this.hasErrors(getFieldsValue())}>查询</Button>
</div>
</Col>):''}
</Row>
</Form>
</div>
)}
}
export default componentName;
关于antd form表单getFieldsError方法的更多相关文章
- jquery实现ajax提交form表单的方法总结
本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一: function AddHandlingFeeToRefund( ...
- jquery实现ajax提交form表单的方法总结(转)
方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement ...
- jQuery重置form表单的方法
1 $("#formChangePwd")[0].reset();//清空表单元素的值 2 或直接用javascript代码操作 http://www.jb51.net/art ...
- django框架中form表单Post方法无法提交 Forbidden (403) CSRF verification failed. Request aborted.
问题如图: 解决方法: 在视图函数中引入并使用装饰器 from django.views.decorators.csrf import csrf_exempt @csrf_exempt
- react + antd Form表单校验
非空限制 {getFieldDecorator('name', { rules: [{ required: true, message: '名称不能为空', }],})( <Input plac ...
- js实现a标签超链接提交form表单的方法
<a class="regButton" id="saveRegister" onclick="document.getElementBy ...
- PHP通过get方法获得form表单数据方法总结
下面给大家带来具体的代码示例: 1.form表单代码示例(表单get提交) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <head> <meta cha ...
- js重置form表单
CreateTime--2017年7月19日10:37:11Author:Marydon js重置form表单 需要使用的方法:reset() 示例: HTML部分 <form id=&qu ...
- react引用antd的form表单
引用form是第三方插件ant插件,官网网址:https://ant.design/.用到的antd的版本是@2.0.1.form(https://ant.design/components/form ...
随机推荐
- [hdoj4578][多延迟标记的线段树]
Transformation Time Limit: 15000/8000 MS (Java/Others) Memory Limit: 65535/65536 K (Java/Others)T ...
- mysql 1040 连接数太多 mysql Error 1040 too many connection解决办法
近在用SpringMVC开发的时候,突然出现1040 too many connection的错误,看错误的意思是连接的人数太多了.百度经验:jingyan.baidu.com 方法/步骤 1 当 ...
- 001_linuxC++之_类的引入
(一) C++类的引入,图片的程序比较好看,文中程序不贴出来 (二) 知识点 1. 成员函数的存取权限:公有的(public),保护的(protectd),私有的(private) 2. 第27行th ...
- web超大文件上传
文件夹数据库处理逻辑 publicclass DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject(); ...
- pause函数
pause函数 调用该函数可以造成进程主动挂起,等待信号唤醒.调用该系统调用的进程将处于阻塞状态(主动放弃cpu) 直到有信号递达将其唤醒. int pause(void); 返回值:-1 并 ...
- Python数据类型之数值-Python基础前传(5)
学习任何一门学科或者手艺,最忌讳的就是想的太多,做的太少: 有很多朋友私信问我:jacky,我们该如何选择Python的课程?或是我们该如何选择Mysql课程?到底谁的课件和书籍才是最好的? 借着今天 ...
- Shell基础之四 变量与运算
shell变量与运算 变量存在于内存中.假设变量str,设置或修改变量属性时,不带$号,只有引用变量的值时才使用$号.也就是说在内存中,标记变量的变量名称是str,而不是$str. 变量数据的存储方式 ...
- intel官方的手册
最近在学习汇编语言,需要用到intel的手册,无论是csdn还是其他的,都要下载币,还不便宜,也很老的资料了. 直接到这个地址:https://software.intel.com/en-us/art ...
- ajax 的 get 方式
因为如果使用ajax 的 get 方式提交数据到后台controller的时候可能会出现缓存而无法提交的现象. 解决这类问题的方法有两种: 1.在ajax的url后面添加一个随机参数如 URL+&qu ...
- ICEM—气体罐子
原视频下载地址:https://yunpan.cn/cPfzaLzkcFXVK 访问密码 62cf