antd 父组件取子组件form 表单的值

 

 父组件

class Modals extends Component {
    handleCancel = () => {
        this.props.closeModal(false);
    }
    handleCreate = () => {
        console.log(this.formRef.getItemsValue());     //6、调用子组件的自定义方法getItemsValue。注意：通过this.formRef 才能拿到数据
        this.props.getFormRef(this.formRef.getItemsValue());
        this.props.closeModal(false);
    }
    render() {
        const { visible } = this.props;
        return (
            <Modal
                visible={visible}
                title="新增"
                okText="保存"
                onCancel={this.handleCancel}
                onOk={this.handleCreate}
            >
            　　<Forms wrappedComponentRef={(form) => this.formRef = form} />
            </Modal>
        );
    }
}

子组件

import React, { Component } from 'react';
import { Form, Input } from 'antd';

const FormItem = Form.Item;

class Forms extends Component{
    getItemsValue = ()=>{    //3、自定义方法，用来传递数据（需要在父组件中调用获取数据）
        const valus= this.props.form.getFieldsValue();       //4、getFieldsValue：获取一组输入控件的值，如不传入参数，则获取全部组件的值
        return valus;
    }
    render(){
        const { form } = 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); 

 

 

子组件中 获取表单值 

this.props.form.getFieldsValue() 这个方法，不能验证，直接获取值， 返回的是一个数据对象

this.props.form.validateFields()这个方法可以验证规则后获取值 ，直接返回 该方法 是一个 Promise 对象，并且控制台在验证有必填数据没填写的时候会报错，虽然不影响使用 但是 也不好看

 

不知道错误是否跟使用ts 有关，我使用先验证通过了在返回值，就不会报错了，如下：

 

getItemsValue = ()=>{    //自定义方法，用来传递数据（需要在父组件中调用获取数据）
        // const valus= this.props.form.validateFields(); 
        return  new Promise((resolve, reject)=>{
            this.props.form.validateFields((error:any,value:any)=>{
                if (!error) {
                    resolve(value);
                }else{
                    reject();
                }
            });
        })
    }