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