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表单的值相关推荐

[转]Joomla! 1.5中form表单的实现方式
原文链接:Joomla! 1.5中form表单的实现方式 Joomla! 1.5中JParameter不但提供了一个xml 和ini文件读取和访问的方式,同时它提供了一个render函数,这个rend ...
html中form表单标签的使用
在html中,表单是经常用到的,用来与用户交互并提交数据.今天要介绍的就是表单标签form标签 "form"作为英文单词有"表格"的意思 1.定义和用法标签是 ...
php同时接受get post,php中form表单同时使用POST和GET传递参数说明
摘要腾兴网为您分享:php中form表单同时使用POST和GET传递参数说明,同花顺,淘集集,尚游戏,美食天下等软件知识,以及医联网,recovernt,wifi控制,音效驱动,板栗直播,畅想听吧, ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
vue 父组件、子组件对象改变_VUE里子组件获取父组件动态变化的值
在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态. 场景:子组件通过props获取父组件传过来的数据,子组件存在 ...
处理vue异步请求数据动态从父组件向子组件赋值时，子组件无法获取到值问题
1. 组件执行顺序导致: 父组件:created->子组件:created->子组件:mounted->父组件:mounted 2.问题子组件无法获取到值 //父组件 exp ...
vue3.0 父组件调用子组件方法及获取子组件的值
vue3.0 父组件调用子组件方法及获取子组件的值通过对比2.0的获取及调用方式这里我们也可以借鉴2.0中的this.$refs去获取3.0和2.0的refs获取的方式有点大同小异,但是思路还是一样 ...
vue 父组件传子组件数值，父值变更子获取的值没有变的问题
1.父组件给子组件传值,子组件使用props接收值. //父组件 <div><Treeselect :value="editFormData.customerId" ...
vue 子组件调用父组件方法、值（父传子）；父组件调用子组件方法、值（子传父）。
一.子组件调用父组件方法(父传子-方法) 场景:子组件是弹出框组件.当点击确定时,将新增的值增加到父组件的列表.就要调用父组件的getLIst()方法. 代码: //父组件利用@子组件方法名=&qu ...
python字典修改键所对应值_详解如何修改python中字典的键和值
我们知道python中字典是无序的,它们都是通过hash去对应的.一般的如果我们需要修改字典的值,只需要直接覆盖即可,而修改字典的键,则需要使用字典自带的pop函数,示例如下: t = {} t['a ...

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

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

最新文章

热门文章