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();
                }
            });
        })
    }