关于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 ...
随机推荐
- mybatis+mysql批量插入和批量更新
一.批量插入 批量插入数据使用的sql语句是: insert into table (字段一,字段二,字段三) values(xx,xx,xx),(oo,oo,oo) mybatis中mapper.x ...
- pandas处理json脱坑(一)--JsonError: Expecting property name enclosed in double quotes
python执行json.loads(…)时遇到的错误json格式的文本中应该用双引号,而不是单引号,如: brief=json.loads(row["brief"].replac ...
- JQuery实践--Ajax
Ajax概览无需刷新用户页面而发起服务器请求的技术.创建一个XHR实例: var xhr if(window.XMLHttpRequest) { xhr = new XML ...
- SQL Server report server使用
1.配置share point網站來改動報表 打開Reporting Servers Configuration Manager,裏面有Web Service URL(http://loca ...
- Vue-es6基础语法
什么是ES6 ECMAScript 6 简称ES6, 在2015年6月正式发布~ ECMAScript 是JavaScript语言的国际标准. 我们本着二八原则,掌握好常用的,有用的~能让我们更快的 ...
- 数据结构实验之数组二:稀疏矩阵(SDUT 3348)
Problem Description 对于一个n*n的稀疏矩阵M(1 <= n <= 1000),采用三元组顺序表存储表示,查找从键盘输入的某个非零数据是否在稀疏矩阵中,如果存在则输出O ...
- nodejs基础(回调函数、模块、事件、文件读写、目录的创建与删除)
node官网:http://nodejs.cn/ 今天想看看node的视频,对node进一步了解, 1.我们可以从官网下载node到自己的电脑上,今天了解到node的真正概念,node时javascr ...
- Java并发指南7:JUC的核心类AQS详解
一行一行源码分析清楚AbstractQueuedSynchronizer 转自https://www.javadoop.com/post/AbstractQueuedSynchronizer#toc4 ...
- mysql —日志记录
日志 事务日志: transaction log 中继日志: reley log错误日志: error log 通用日志: general log 慢查询日志: slow query log 二进制日 ...
- [Phoenix] Mix 命令
mix phx.gen.html 命令生成模板: # 其中 name 和 age 是 schema 字段名称,后面跟的是类型 # 下面这样的写法,会生成 controller 和 service 层的 ...