关于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 ...
 
随机推荐
- 前端知识体系:JavaScript基础-作用域和闭包-闭包的实现原理和作用以及堆栈溢出和内存泄漏原理和相应解决办法
			
闭包的实现原理和作用 闭包: 有权访问另一个函数作用域中的变量的函数. 创建闭包的常见方式就是,在一个函数中创建另一个函数. 闭包的作用: 访问函数内部变量.保持函数在环境中一直存在,不会被垃圾回收机 ...
 - sql 查询 between and 和 >= <= 比较
			
好久没有更新博客了,积累了很多问题没有得到解决,自己也在纠结有些东西需不需要花时间研究一下,认真想了想,不管怎么样,不能停止更新博客,继续保持一周至少一篇的习惯,不能放弃. 今天说的问题比较简单,就是 ...
 - 使用docker 起容器配置负载均衡(加权)
			
首先要准备三个nginx的容器: 第二个容器: 第三个容器: 进入第一个容器(主容器) 要配置的容器(docker exec -it 容器id /bin/bash) vi/etc/nginx/ng ...
 - 数据库学习之四--Join, Left Join, Right Join, Full Join对比
			
一.Join, Left Join, Right Join, Full Join区别: 二.查询对比 1. 创建表Persons和Orders,并插入数据: CREATE TABLE `persons ...
 - codevs 1166 矩阵取数游戏
			
二次联通门 : codevs 1166 矩阵取数游戏 /* codevs 1166 矩阵取数游戏 SB区间dp dp[l][r] = max (dp[l + 1][r] + number[l], dp ...
 - ipv4保留地址
			
曾经以为保留地址下面三类.原来使用中还有很多的. A类 10.0.0.0--10.255.255.255 B类 172.16.0.0--172.31.255.255 C类 192.168.0.0--1 ...
 - react-native 打包apk 更新js和常见问题
			
1.打包发布 a.在工程根目录执行如下命令 打包js资源文件 react-native bundle --platform android --dev false --entry-file index ...
 - VUE项目开发流程
			
前期准备 安装npm 安装webpack\vue-cli(2.9.6版本--版本不同可能会导致以下一些目录结构以及错误解决办法不符合实际情况) 创建项目 初始化创建项目,项目名称.项目描述.拥有者等等 ...
 - 【locust】使用locust + boomer实现对接口的压测
			
背景 很早之前,考虑单机执行能力,使用locust做过公司短信网关的压测工作,后来发现了一个golang版本的locust,性能是python版本的5到10倍以上,但是一直没有机会使用. 最近公司想做 ...
 - Maven的New中没有Servlet问题(IDEA)
			
1.问题 第一次使用Maven骨架创建Web项目的时候,遇到了 New 里面没有 servlet 的问题. 2.原因 经过查询,是因为IDEA检测到项目中没有导入相关的 jar 包导致. 3.解决方法 ...