ant-design getFieldDecorator 无法获取自定义组件的值
1.自定义或第三方的表单控件,也可以与 Form 组件一起使用。只要该组件遵循以下的约定:
(1)提供受控属性 value 或其它与 valuePropName 的值同名的属性。
(2)提供 onChange 事件或 trigger 的值同名的事件。
(3)不能是函数式组件。
2.创建组件
components/PriceInput/index.js
import React, { PureComponent } from 'react';
import { Input, Select } from 'antd'; const Option = Select.Option; export default class PriceInput extends PureComponent {
constructor(props) {
super(props); const value = props.value || {};
this.state = {
number: value.number || 0,
currency: value.currency || 'rmb',
};
} componentWillReceiveProps(nextProps) {
// Should be a controlled component.
if ('value' in nextProps) {
const value = nextProps.value;
this.setState(value);
}
} handleNumberChange = (e) => {
const number = parseInt(e.target.value || 0, 10);
if (isNaN(number)) {
return;
}
if (!('value' in this.props)) {
this.setState({ number });
}
this.triggerChange({ number });
} handleCurrencyChange = (currency) => {
if (!('value' in this.props)) {
this.setState({ currency });
}
this.triggerChange({ currency });
} triggerChange = (changedValue) => {
// Should provide an event to pass value to Form.
const onChange = this.props.onChange;
if (onChange) {
onChange(Object.assign({}, this.state, changedValue));
}
} render() {
const { size } = this.props;
const state = this.state;
return (
<span>
<Input
type="text"
size={size}
value={state.number}
onChange={this.handleNumberChange}
style={{ width: '65%', marginRight: '3%' }}
/>
<Select
value={state.currency}
size={size}
style={{ width: '32%' }}
onChange={this.handleCurrencyChange}
>
<Option value="rmb">RMB</Option>
<Option value="dollar">Dollar</Option>
</Select>
</span>
);
}
}
3.调用
import React, { PureComponent } from 'react';
import { Form, Button } from 'antd'; const FormItem = Form.Item; class Demo extends PureComponent {
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
} checkPrice = (rule, value, callback) => {
if (value.number > 0) {
callback();
return;
}
callback('Price must greater than zero!');
} render() {
const { getFieldDecorator } = this.props.form;
return (
<Form layout="inline" onSubmit={this.handleSubmit}>
<FormItem label="Price">
{getFieldDecorator('price', {
initialValue: { number: 0, currency: 'rmb' },
rules: [{ validator: this.checkPrice }],
})(<PriceInput />)}
</FormItem>
<FormItem>
<Button type="primary" htmlType="submit">Submit</Button>
</FormItem>
</Form>
);
}
} const WrappedDemo = Form.create()(Demo); export default WrappedDemo;
.
ant-design getFieldDecorator 无法获取自定义组件的值的更多相关文章
- AntDesign getFieldDecorator 获取自定义组件的值
AntDesign getFieldDecorator 获取自定义组件的值 1.自定义或第三方的表单控件,也可以与 Form 组件一起使用.只要该组件遵循以下的约定: (1)提供受控属性 value ...
- Ant Design框架中不同的组件访问不同的models中的数据
Ant Design框架中不同的组件访问不同的models中的数据 本文记录了我在使用该框架的时候踩过的坑,方便以后查阅. 一.models绑定 在某个组件(控件或是页面),要想从某个models中获 ...
- Vue 父组件主动获取子组件的值,子组件主动获取父组件的值
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header"2. 在父组件中通过this.$refs.header.属性,调用子组件的属性, ...
- vue3 template refs dom的引用、组件的引用、获取子组件的值
介绍 通过 ref() 还可以引用页面上的元素或组件. DOM 的引用 <template> <div> <h3 ref="h3Ref">Tem ...
- jsp获取单选按钮组件的值
jsp获取单选按钮组件的值 1.首先,写一个带有单选按钮组件的前台页 1 <%@ page language="java" contentType="text/ht ...
- Ant Design 通过 WeekPicker 获取一周的起止时间
项目中遇到了选择日期获取当前日期一周的周一和周日的日期,如下: 项目使用的是 ant design,所以第一时间想到了 DatePicker 中的 WeekPicker 组件,查询文档得到 WeekP ...
- Vue自定义组件插入值
我们自定义组件的时候有时候需要往组件里面插一些内容: //定义一个组件test,插值内容用slog来代替 export default { name: 'test', template:` <d ...
- Ant Design Pro 学习三 新建组件
在 src/components 下新建一个以组件名命名的文件夹,注意首字母大写 在使用组件时,默认会在 index.js 中寻找 export 的对象,如果你的组件比较复杂,可以分为多个文件,最后在 ...
- Ant Design Blazor 组件库的路由复用多标签页介绍
最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件. 前 ...
随机推荐
- 【SQL】将特定的元素按照自己所需的位置排序
Oracle中,平时我们排序常用“Order by 列名” 的方式来排序,但是有的时候我们希望这个列中的某些元素排在前面或者后面或者中间的某个位置. 这时我们可以使用Order by case whe ...
- 《深入浅出Nodejs》笔记——模块机制(2)
前言 书上还有很大一部分讲了C/C++模块的编译过程.核心模块编写和C/C++扩展模块的内容,不过我对C++一窍不通因此没有仔细看,如果以后需要再自习看吧. 包与NPM 第三方模块中,模块和模块之间是 ...
- Codeforces Round #165 (Div. 1) Greenhouse Effect(DP)
Greenhouse Effect time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- Spring AOP动态代理
出现org.springframework.aop.framework.ProxyFactoryBean cannot be cast to 错误 在类型转换的时候, 调用getObject()方法, ...
- js 封装的自动创建表格的相关操作
因为要做一个动态输入的表格,现在积累一下资料,在网上找了一些资料,经过总结是使用更加方便些,谁有更好的插件和封装的东西,请大家分享一下. <script type="text/java ...
- #Java Web累积#关于MUI的上滑和下拉加载
其实按照MUI的文档去写,也没什么问题: JSP中: <%@ page contentType="text/html;charset=UTF-8" language=&quo ...
- Delphi 中ASSERT用法
http://blog.csdn.net/dongyonggan/article/details/5780979 用法:ASSERT(表达式) 如果为假,ASSERT会产生一个EASSERTIONFA ...
- 使用BusyBox制作linux根文件系统(CramFS+mdev)
转:http://www.360doc.com/content/10/0428/11/496343_25245348.shtml 操作系统:Ubuntu9.04 内核版本:linux-2.6.24.7 ...
- 关于单例模式的N种实现方式
在开发中经常用到单例模式,单例模式也算是设计模式中最容易理解,也是最容易手写代码的模式,所以也常作为面试题来考.所以想总结一下单例模式的理论知识,方便同学们面试使用. 单例模式实现的方式只有两种类型, ...
- ELK集群模式部署
架构拓扑图为: 准备工作: 下载资源包: Elasticsearch: wget https://artifacts.elastic.co/downloads/elasticsearch/elasti ...