还是拿代码来讲吧,详情见注释
子组件
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; //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实例
getFieldDecorator 的具体参数见官方文档)
父组件
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 (<Modalvisible={visible}title="新增"okText="保存"onCancel={this.handleCancel}onOk={this.handleCreate}><FormswrappedComponentRef={(form) => this.formRef = form} //5、使用wrappedComponentRef 拿到子组件传递过来的ref(官方写法)/></Modal>);}}
官方文档
class CustomizedForm extends React.Component { ... }// use wrappedComponentRefconst EnhancedForm = Form.create()(CustomizedForm);<EnhancedForm wrappedComponentRef={(form) => this.form = form} />this.form // => The instance of CustomizedForm
