還是拿代碼來講吧，詳情見注釋

子組件

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(

<>

{getFieldDecorator('name')( //2、getFieldDecorator 的使用方法，這種寫法真的很蛋疼

)}

{getFieldDecorator('age')(

)}

{getFieldDecorator('address')(

)}

>

)

}

}

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 (

visible={visible}

title="新增"

okText="保存"

onCancel={this.handleCancel}

onOk={this.handleCreate}

>

wrappedComponentRef={(form) => this.formRef = form} //5、使用wrappedComponentRef 拿到子組件傳遞過來的ref(官方寫法)

/>

);

}

}

官方文檔

class CustomizedForm extends React.Component { ... }

// use wrappedComponentRef

const EnhancedForm = Form.create()(CustomizedForm);

this.form = form} />

this.form // => The instance of CustomizedForm

總結

以上是生活随笔為你收集整理的antd如何获取表单的值_antd 父组件获取子组件中form表单的值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。