我就废话不多说了，大家还是直接看代码吧~子组件：子组件：
// jshint esversion:6
import React, { Component } from 'react';
import { Form, Input} from 'antd';

const FormItem = Form.Item;

class Forms extends Component{
getItemsValue = ()=>{ //3、自定义方法，用来传递数据（需要在父组件中调用获取数据）

const values= this.props.form.getFieldsValue();
//4、getFieldsValue：获取一组输入控件的值，如不传入参数，则获取全部组件的值

return values;
}
render(){

const { form } = this.props;

const { getFieldDecorator } = form; //1、将getFieldDecorator 解构出来，用于和表单进行双向绑定

return(

{getFieldDecorator('name')( //2、getFieldDecorator 的使用方法，这种写法真的很蛋疼



)}





{getFieldDecorator('age')(



)}





{getFieldDecorator('address')(



)}

)
}
}

export default Form.create()(Forms); //创建form实例

// jshint esversion:6
import React, { Component } from 'react';
import { Form, Input} from 'antd';

const FormItem = Form.Item;

class Forms extends Component{
getItemsValue = ()=>{ //3、自定义方法，用来传递数据（需要在父组件中调用获取数据）

const values= this.props.form.getFieldsValue();
//4、getFieldsValue：获取一组输入控件的值，如不传入参数，则获取全部组件的值

return values;
}
render(){

const { form } = this.props;

const { getFieldDecorator } = form; //1、将getFieldDecorator 解构出来，用于和表单进行双向绑定

return(

{getFieldDecorator('name')( //2、getFieldDecorator 的使用方法，这种写法真的很蛋疼



)}





{getFieldDecorator('age')(



)}





{getFieldDecorator('address')(



)}

)
}
}

export default Form.create()(Forms); //创建form实例
父组件：父组件：
import React, { Component } from 'react';
import { Modal } from 'antd';
import Forms from './Forms'

export default 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 (


visible={visible}

title="新增"

okText="保存"

onCancel={this.handleCancel}

onOk={this.handleCreate}

>


wrappedComponentRef={(form) => this.formRef = form}
//5、使用wrappedComponentRef 拿到子组件传递过来的ref（官方写法）

/>



);
}
}

import React, { Component } from 'react';
import { Modal } from 'antd';
import Forms from './Forms'

export default 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 (


visible={visible}

title="新增"

okText="保存"

onCancel={this.handleCancel}

onOk={this.handleCreate}

>


wrappedComponentRef={(form) => this.formRef = form}
//5、使用wrappedComponentRef 拿到子组件传递过来的ref（官方写法）

/>



);
}
}
补充知识：react+antd组件 modal里面包裹使用form表单并获取提交事件补充知识：补充知识：react+antd组件 modal里面包裹使用form表单并获取提交事件1 先上图我这里是点击“修改密码”那个按钮，然后跳到了modal框。（大家这里可以随便写一个按钮，然后给他一个点击事件让他可以显示modal框就好了，我这里着重讲解标题的内容）2 贴代码
const [visible, setVisible] = useState(false);//antd 控制modal是否显示
const showMoal=()=>{
// console.log("showMoal")
setVisible(true);
}
const handleCancel = e => {
// console.log("cancel:",e);
setVisible(false);
};

function updatePasswordChange(){
// console.log("0000");
setVisible(false);
}

//Modal框

title="密码修改"

visible={visible}

onCancel={handleCancel}

footer={null}
>







//Form表单的提交事件
const onFinish = values => {

// console.log('Success:', values);

IsUpdatePassword.commit(session.environment,values.newpassword,values.oldpassword,(response, errors) => {

if (errors) {

message.error(errors[0].message);

} else {

//修改密码成功

message.success('修改密码成功!');

props.updatePasswordChange();

}

},

(errors) => {

message.error(errors.source.errors[0].message);

})


};

//Form表单部分
return(

<>


{...layout}

name="密码修改"

initialValues={{

remember: true,

}}

onFinish={onFinish}

onFinishFailed={onFinishFailed}

>


label="旧密码"

name="oldpassword"

rules={[

{

required: true,

message: '请输入旧密码!',

},

]}

>







label="新密码"

name="newpassword"

rules={[

{

required: true,

message: '请输入新密码!',

},

]}

hasFeedback

>







name="confirm"

label="确认新密码"

dependencies={['newpassword']}

hasFeedback

rules={[

{

required: true,

message: '请确认新密码!',

},

({ getFieldValue }) => ({

validator(rule, value) {

if (!value || getFieldValue('newpassword') === value) {

return Promise.resolve();

}

return Promise.reject('两次新密码不一致!');

},

}),

]}

>







{/*

Remember me

*/}










确认









取消












);
}

const [visible, setVisible] = useState(false);//antd 控制modal是否显示
const showMoal=()=>{
// console.log("showMoal")
setVisible(true);
}
const handleCancel = e => {
// console.log("cancel:",e);
setVisible(false);
};

function updatePasswordChange(){
// console.log("0000");
setVisible(false);
}

//Modal框

title="密码修改"

visible={visible}

onCancel={handleCancel}

footer={null}
>







//Form表单的提交事件
const onFinish = values => {

// console.log('Success:', values);

IsUpdatePassword.commit(session.environment,values.newpassword,values.oldpassword,(response, errors) => {

if (errors) {

message.error(errors[0].message);

} else {

//修改密码成功

message.success('修改密码成功!');

props.updatePasswordChange();

}

},

(errors) => {

message.error(errors.source.errors[0].message);

})


};

//Form表单部分
return(

<>


{...layout}

name="密码修改"

initialValues={{

remember: true,

}}

onFinish={onFinish}

onFinishFailed={onFinishFailed}

>


label="旧密码"

name="oldpassword"

rules={[

{

required: true,

message: '请输入旧密码!',

},

]}

>







label="新密码"

name="newpassword"

rules={[

{

required: true,

message: '请输入新密码!',

},

]}

hasFeedback

>







name="confirm"

label="确认新密码"

dependencies={['newpassword']}

hasFeedback

rules={[

{

required: true,

message: '请确认新密码!',

},

({ getFieldValue }) => ({

validator(rule, value) {

if (!value || getFieldValue('newpassword') === value) {

return Promise.resolve();

}

return Promise.reject('两次新密码不一致!');

},

}),

]}

>







{/*

Remember me

*/}










确认









取消












);
}
小结：小结：小结：上面的代码你看起来可能有点乱，而且也运行不起来，那是肯定的！因为我只粘贴了整个项目的一部分。下面我来点睛：modal里面使用form表单并获取提交事件主要是使用了modal的**footer={null}**这个特性把外面的“确认取消按键隐藏”，然后使用我们自己的Form的“确定取消”按键，然后再通过Form的onFinish 事件来提交值和控制modal框的显示与消失。就ok了！以上这篇在react-antd中弹出层form内容传递给父组件的操作就是小编分享给大家的全部内容了，希望能给大家一个参考。