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;

.