在react-antd中弹出层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(
   
  )
 }
}

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里面使用form表单并获取提交事件主要是使用了modal的**footer={null}**这个特性把外面的“确认取消按键隐藏”，然后使用我们自己的Form的“确定取消”按键，然后再通过Form的onFinish 事件来提交值和控制modal框的显示与消失。

就ok了！

以上这篇在react-antd中弹出层form内容传递给父组件的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。