我就廢話不多說了，大家還是直接看程式碼吧~

子元件：

// 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(
   <Form layout="vertical">
    <FormItem label="姓名">
     {getFieldDecorator('name')( //2、getFieldDecorator 的使用方法，這種寫法真的很蛋疼
      <Input />
     )}
    </FormItem>
    <FormItem label="年齡">
     {getFieldDecorator('age')(
      <Input />
     )}
    </FormItem>
    <FormItem label="城市">
     {getFieldDecorator('address')(
      <Input />
     )}
    </FormItem>
   </Form>
  )
 }
}

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 (
   <Modal
    visible={visible}
    title="新增"
    okText="儲存"
    onCancel={this.handleCancel}
    onOk={this.handleCreate}
   >
    <Forms
     wrappedComponentRef={(form) => this.formRef = form}  //5、使用wrappedComponentRef 拿到子元件傳遞過來的ref（官方寫法）
    />
   </Modal>
  );
 }
}

補充知識：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框
 <Modal
  title="密碼修改"
  visible={visible}
  onCancel={handleCancel}
  footer={null}
 >
  
  <UpdatePassword updatePasswordChange={updatePasswordChange}></UpdatePassword>
</Modal>


//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(
  <>
   <Form
    {...layout}
    name="密碼修改"
    initialValues={{
     remember: true,}}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
   >
    <Form.Item
     label="舊密碼"
     name="oldpassword"
     rules={[
     {
      required: true,message: '請輸入舊密碼!',},]}
    >
     <Input.Password />
    </Form.Item>

    <Form.Item
     label="新密碼"
     name="newpassword"
     rules={[
     {
      required: true,message: '請輸入新密碼!',]}
     hasFeedback
    >
     <Input.Password />
    </Form.Item>

    <Form.Item
     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('兩次新密碼不一致!');
      },}),]}
    >
     <Input.Password />
    </Form.Item>


    {/* <Form.Item {...tailLayout} name="remember" valuePropName="checked">
     <Checkbox>Remember me</Checkbox>
    </Form.Item> */}

    <Form.Item {...tailLayout}>
     <Row>
      <Col span={12}>
       <Button type="primary" htmlType="submit">
       確認
       </Button>
      </Col>
      <Col span={12}>
       <Button onClick={props.updatePasswordChange}>
       取消
       </Button>
      </Col>
     </Row>
    </Form.Item>
   </Form>
  </>
 );
}

小結：

上面的程式碼你看起來可能有點亂，而且也執行不起來，那是肯定的！因為我只貼上了整個專案的一部分。

下面我來點睛：modal裡面使用form表單並獲取提交事件主要是使用了modal的**footer={null}**這個特性把外面的“確認取消按鍵隱藏”，然後使用我們自己的Form的“確定取消”按鍵，然後再通過Form的onFinish 事件來提交值和控制modal框的顯示與消失。

就ok了！

以上這篇在react-antd中彈出層form內容傳遞給父元件的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。