关于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 ...
随机推荐
- 如何使用python异常---runtimeError方法
RuntimeError def ilove(name): if name=='陈培昌': print('i love {0}'.format(name)) elif name == '程劲': pr ...
- SEERC 2018 B. Broken Watch (CDQ分治)
题目链接:http://codeforces.com/gym/101964/problem/B 题意:q 种操作,①在(x,y)处加一个点,②加一个矩阵{(x1,y1),(x2,y2)},问每次操作后 ...
- zhengrui集训笔记2
Day_6 计算几何 点积\Large 点积点积 叉积\Large 叉积叉积 极角\Large 极角极角 < π\piπ :叉积判断 else :atan2 旋转\Large 旋转旋转 左乘第一 ...
- electron 打包成桌面运用
最近在学习nodejs,得知Electron是通过将Chromium和Node.js合并到同一个运行时环境中,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一门技术.对于之前一直从 ...
- 常见http响应状态码(status)
1.100-199信息响应 100 Continue: 服务器通知浏览器之前一切正常,请客户端继续请求,如果请求结束,可忽略: 101 Switching Protocal: 针对请求头的Upgrad ...
- Vue中v-if和v-show的使用场景
1. 官方文档 https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show 2. v-if 和 v-show 的区别 2.1 官方解释 ...
- 【csp模拟赛6】相遇--LCA
对于30%的数据:暴力枚举判断 对于60%的数据:还是暴力枚举,把两条路径都走一遍计一下数就行,出现一个点被访问两次即可判定重合 对于100%的数据:找出每条路径中距离根最近的点(lca),判断这个点 ...
- [2]windows内核情景分析--系统调用
Windows的地址空间分用户模式与内核模式,低2GB的部分叫用户模式,高2G的部分叫内核模式,位于用户空间的代码不能访问内核空间,位于内核空间的代码却可以访问用户空间 一个线程的运行状态分内核态与用 ...
- C语言学习笔记2-程序基础和变量
本系列文章由jadeshu编写,转载请注明出处.http://blog.csdn.net/jadeshu/article/details/50751977 作者:jadeshu 邮箱: jades ...
- sql server解锁表
EXEC sp_who active --看哪个引起的阻塞,blk blk<>0 --解锁表declare @spid intSet @spid = 274 --锁表进程declare @ ...