antd parent component values from component form the form

 

 Parent component

class ones to watch out the extends the Component { 
    handleCancel = () => {
         the this .props.closeModal ( to false ); 
    } 
    handleCreate = () => { 
        the console.log ( the this .formRef.getItemsValue ());      // . 6, call subassembly custom method getItemsValue. Note: in order to get data this.formRef 
        the this .props.getFormRef ( the this .formRef.getItemsValue ());
         the this .props.closeModal ( to false ); 
    } 
    the render () { 
        const {visible} = the this .props;
         return (
            <Modal
                visible={visible}
                title="新增"
                okText="保存"
                onCancel={this.handleCancel}
                onOk={this.handleCreate}
            >
            　　<Forms wrappedComponentRef={(form) => this.formRef = form} />
            </Modal>
        );
    }
}

Subassembly

React Import, the Component {} from  ' REACT ' ; 
Import {Form1, the Input} from  ' antd ' ; 

const the FormItem = Form.Item; 

class Forms the extends the Component { 
    getItemsValue = () => {     // . 3, custom methods, with to pass data (called the parent component required to obtain data) 
        const valus = the this .props.form.getFieldsValue ();        // . 4, getFieldsValue: obtaining a set of input control value, if not pass parameters, all of the components is acquired value 
        return valus; 
    } 
    the render () { 
        const {} = form the this .props;
         const { getFieldDecorator } = form; 
        return(
            <>
                <Form layout="vertical">
                    <FormItem label="姓名">
                        {getFieldDecorator('name')( 
                            <Input />
                        )}
                    </FormItem>
                    <FormItem label="年龄">
                        {getFieldDecorator('age')(
                            <Input />
                        )}
                    </FormItem>
                    <FormItem label="城市">
                        {getFieldDecorator('address')(
                            <Input />
                        )}
                    </FormItem>
                </Form>
            </>
        )
    }
}

export default Form.create()(Forms); 

 

 

Gets the value subassembly 

this.props.form.getFieldsValue () This method can not be verified, direct access to the value returned is a data object

this.props.form.validateFields () method after the validation rules can get the value, which is a direct return Promise objects, and the console has verified the data required to fill in when not being given, although not affect the use but not good looking

 

I do not know whether the error related with the use of ts, I use to verify by the return value, the error will not, as follows:

 

= getItemsValue () => {     // custom method for transferring data (called the parent component required to obtain data)
         // const this.props.form.validateFields valus = (); 
        return   new new Promise ((Resolve, Reject ) => {
             the this .props.form.validateFields ((error: the any, value: the any) => {
                 IF (! error) { 
                    Resolve (value); 
                } the else { 
                    Reject (); 
                } 
            }); 
        }) 
    }