antd如何获取表单的值_antd 父组件获取子组件中form表单的值

还是拿代码来讲吧，详情见注释

子组件

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表单的值的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。