ant-design getFieldDecorator 无法获取自定义组件的值

1.自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：

（1）提供受控属性 value 或其它与 valuePropName 的值同名的属性。

（2）提供 onChange 事件或 trigger 的值同名的事件。

（3）不能是函数式组件。

2.创建组件

components/PriceInput/index.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

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.调用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

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;

.