ant design的form组件使用总结

1.创建

@Form.create()//写在class外面

然后就能通过this.props.from来操作

2.form内的值的操作

(1)查

this.props.form.validateFields((err, values) => {

  console.log(values)
});

(2)增,改

this.props.form.setFieldsValue({id:1});

注意:必须先有dom,比如:

<Form onSubmit={this.handleSubmit}>
<FormItem style={{ display:‘none‘ }}>
{form.getFieldDecorator(‘id‘)(<Input/>)}
</FormItem>

<Form>

以后

才能在

this.props.form.validateFields((err, values) => {
});

里面通过values.id来获取id

如果只是this.props.form.setFieldsValue({id:1});而没有对应的dom,则无法获取values.id

原文地址:https://www.cnblogs.com/spirker/p/11314679.html

时间: 2024-08-30 12:38:27

ant design的form组件使用总结的相关文章

2017.11.6 - ant design table等组件的使用,以及 chrome 中 network 的使用

一.今日主要任务 悉尼小程序后台管理开发: 景点管理页面: 获取已有数据列表,选取部分数据呈现在表格中,根据景点名称.分类过滤出对应的景点. 二.难点 1. 项目技术选取: ant design.react.es6: 2. 在此之前,只看过一点点 es6 的语法,未实操:react 也只是看过语法,未实操:ant design 是个什么鬼,第一次听说. 3. 所遇的主要问题: (1)ant design 中 table 组件的使用: 引入 Table.Buttton.Col.Row.Select

Ant Design 中覆盖组件样式

业务场景: 由于业务的个性化需求,我们经常会遇到需要覆盖组件样式的情况,这里举个简单的例子. antd Select 在多选状态下,默认会展示所有选中项,这里我们给它加一个限制高度,超过此高度就出滚动条 代码: // TestPage.less .customSelect { :global { .ant-select-selection { max-height: 51px; overflow: auto; } } } // TestPage.js import { Select } from

ant design vue table组件一列渲染多个参数

如下效果图,开始时间,结束时间为两个字段 代码: const columns = [ { title: '起止时间', customRender: (text, record) => { const time = `${record.dateFrom}-${record.dateTo}`;//es6写法 const time = '${record.dateFrom}' + '-' + ${record.dateTo}';//es5写法 return time; },}] 原文地址:https:

Ant Design 中Select组件报错 Invalid prop `value` of type `string` supplied to `Select`

Invalid prop `value` of type `string` supplied to `Select`, expected `array` when `multiple` or `tags` is `true`. 这个位置默认值为数组 [ ] 原文地址:https://www.cnblogs.com/dianzan/p/12230353.html

自写一个漂亮的ant design form提交标签

在ant design 的form组件中 能用于提交的组件比较少,所以我在这写了一个可以单选.多选标签提交的组件,调用非常简单. 代码: 1 import React,{Fragment} from 'react'; 2 import { Tag,Icon,Input } from 'antd'; 3 export interface TagDataType{ 4 data:string, 5 color:string, 6 key:string 7 } 8 export interface P

小而美的 React Form 组件

背景 之间在一篇介绍过 Table 组件< React 实现一个漂亮的 Table > 的文章中讲到过,在企业级后台产品中,用的最多且复杂的组件主要包括 Table.Form.Chart,在处理 Table 的时候我们遇到了很多问题.今天我们这篇文章主要是分享一下 Form 组件,在业务开发中, 相对 Table 来说,Form 处理起来更麻烦,不是所有表单都像注册页面那样简单,它往往需要处理非常多的逻辑,比如: 需要处理数据验证逻辑. 在一个项目中的很少有可以复用的表单,每个表单的逻辑都需要

react + es6 +ant design 实现一个简单demo表格添加删除

首先介绍一下整体的样式及实现的效果 如图所示,点击添加按钮会接着后面新增一行,点击操作下的删除图标将会删掉一行,如果删掉序号为1的行,第二行会自动变成第一行序号也会随之改变. ps:数据交互均还未实现. 介绍完毕:下面正题! 1.布局 import React, { Component, PropTypes } from 'react';import { Table, DatePicker, Select, InputNumber, Input, Button, Icon } from 'ant

elementUi、iview、ant Design源码button结构篇

在看elementUI的button组件的时候,一起和iview.ant Design的button组件比 较功能.样式.代码结构,看他们的一些不同点,不同的写法哪种会好些,button的对外开放的功能那些会 用到哪些会相对比较好. 我们先来看这三个UI的button对外开放的功能结构: elementUI button: iview button: ant Design button: 可以看出iview和ant Desgin的button的功能很像,而element的button的功能少了个

ant design form表单的时间处理

ant design form表单的时间处理 用ant design开发程序时,会碰到时间的字段,效果如下: 那么该怎么处理呢?可以在表单中使用如下代码: import { DatePicker } from 'antd' import Moment from 'moment' <FormItem label="开始时间" {...formItemLayout}> { getFieldDecorator('sdate', { initialValue: item.sdate