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方法的更多相关文章

  1. jquery实现ajax提交form表单的方法总结

    本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一:  function AddHandlingFeeToRefund( ...

  2. jquery实现ajax提交form表单的方法总结(转)

    方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() {            var AjaxURL= "../OrderManagement ...

  3. jQuery重置form表单的方法

    1  $("#formChangePwd")[0].reset();//清空表单元素的值 2  或直接用javascript代码操作 http://www.jb51.net/art ...

  4. django框架中form表单Post方法无法提交 Forbidden (403) CSRF verification failed. Request aborted.

    问题如图: 解决方法: 在视图函数中引入并使用装饰器 from django.views.decorators.csrf import csrf_exempt @csrf_exempt

  5. react + antd Form表单校验

    非空限制 {getFieldDecorator('name', { rules: [{ required: true, message: '名称不能为空', }],})( <Input plac ...

  6. js实现a标签超链接提交form表单的方法

    <a class="regButton"    id="saveRegister" onclick="document.getElementBy ...

  7. PHP通过get方法获得form表单数据方法总结

    下面给大家带来具体的代码示例: 1.form表单代码示例(表单get提交)   1 2 3 4 5 6 7 8 9 10 11 12 13 14 <head>   <meta cha ...

  8. js重置form表单

      CreateTime--2017年7月19日10:37:11Author:Marydon js重置form表单 需要使用的方法:reset() 示例: HTML部分 <form id=&qu ...

  9. react引用antd的form表单

    引用form是第三方插件ant插件,官网网址:https://ant.design/.用到的antd的版本是@2.0.1.form(https://ant.design/components/form ...

随机推荐

  1. Python 多版本管理利器 pythonbrew

    在$HOME目录中管理python安装 简介 pythonbrew是受 perlbrew 和 rvm 启发,在用户的$HOME目录中进行python构建和安装自动化的项目. 另一衍生版本 : pyth ...

  2. string::clear

    void clear() noexcept;功能:把string对象置为空 #include <iostream>#include <string> using namespa ...

  3. 操作系统-chapter1

    课程:https://mooc.study.163.com/learn/1000002004?tid=2402971010&_trace_c_p_k2_=f79694c7fc04429bb9b ...

  4. python_json模块和pickle模块

    json 优点:所有语言通用:缺点:只能序列化基本的数据类型list/dict/int... json格式中,字符串必须是双引号,字符都是小写. 序列化: import json v = [12,3, ...

  5. Eclipse使用技巧小结

    前言:自学Java以来,就一直用eclipse,这款ide深受广大新手和大牛喜爱.学会使用其中的技巧,越用越熟练,开发也就越快捷方便.话不多说,直接上小结吧. 一.快捷键 1.提示 :A|t+/ 2. ...

  6. ACM-ICPC 2018 沈阳赛区现场赛 K. Let the Flames Begin (约瑟夫环问题)

    题目链接: 题意:有 n 个人围成一个圈,从 1 开始报到第 k 个人出环,问第 m 个出环的人是谁,n.m.k <= 1e18 且 min(m,k)<= 2e6. 题解:容易得出O(m) ...

  7. 编译安装 openmcu

    1. install toolssudo apt-get install libtool autoconf flex bison automake pkg-config 2.yasm-1.3.0sed ...

  8. Oracle 后台进程(四)CKPT进程

    一.CKPT简介 检查点是一个数据库事件,它把修改数据从高速缓存写入磁盘,并更新控制文件和数据文件.检查点分为三类:1)局部检查点:单个实例执行数据库所有数据文件的一个检查点操作,属于此实例的全部脏缓 ...

  9. 「CQOI2006」简单题 线段树

    「CQOI2006」简单题 线段树 水.区间修改,单点查询.用线段树维护区间\([L,R]\)内的所有\(1\)的个数,懒标记表示为当前区间是否需要反转(相对于区间当前状态),下方标记时懒标记取反即可 ...

  10. dosbox+masm汇编环境的安装和使用

    1. 下载dosbox安装程序:DOSBox0.74-win32-installer.exe 链接:https://pan.baidu.com/s/1gXPKTT-xKb6BpjOJdhmudA 密码 ...