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(
            <>
                <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 (
            <Modal
                visible={visible}
                title="新增"
                okText="保存"
                onCancel={this.handleCancel}
                onOk={this.handleCreate}
            >
            <Forms
                wrappedComponentRef={(form) => this.formRef = form}       //5、使用wrappedComponentRef 拿到子组件传递过来的ref(官方写法)
            />
            </Modal>
        );
    }
}
官方文档
class CustomizedForm extends React.Component { ... }

// use wrappedComponentRef
const EnhancedForm = Form.create()(CustomizedForm);
<EnhancedForm wrappedComponentRef={(form) => this.form = form} />
this.form // => The instance of CustomizedForm

原文地址:https://www.cnblogs.com/wyangnb/p/9400347.html

时间: 2024-08-02 06:23:33

antd 父组件获取子组件中form表单的值的相关文章

[js开源组件开发]query组件,获取url参数和form表单json格式

query组件,获取url参数和form表单json格式 距离上次的组件[js开源组件开发]ajax分页组件一转眼过去了近二十天,或许我一周一组件的承诺有了质疑声,但其实我一直在做,只是没人看到……,最近项目紧,几个小组,只有我一个前端,公司对前端的定位不清晰,导致前端人员过少的情况.所以还得促进公司前端人员增长,不然再这么玩下去,我要被玩死了,一个公司,不可能靠一个资深前端来支撑二三十个开发的需求,这是不现实的,特别是现在的页面不再是复制粘贴的前况下.我默默耕芸,所以这次我整理了这一个月里所有

MVC中Form表单的提交

Form表单是数据提交的一种,在MVC中Form表单提交到服务器中地址,接受Form表单的方式有一下几种: 1.采用实体Model类型提交,Form表单中的Input标签name要和Model对应的属性保持一致,接受Form表单的服务器端就可以直接以实体的方式存储,使用方式如下: Form表单: <form action="/Employee/SaveEmployee" method="post"> <table> <tr> &l

extjs中form表单提交成功、失败的响应信息

类Ext.form.Action.Submit 处理表单Form数据和返回的response对象的类. 该类的实例仅在表单Form{@link Ext.form.BasicForm#submit 提交}的时候创建. 返回的数据包必须包含一个 boolean 类型的success属性,还有可选地,一个含有无效字段的错误信息的属性 A response packet may contain: ·        success property : Boolean - required. ·     

React Hook父组件获取子组件的数据/函数

我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用.文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hook的讲的太少,要不就是父子组件傻傻分不清,于是只好再啃了一下文档,就学了一下其它hook的api. 在这里我们需要用到useImperativeHandle这个api,其函数形式为 useImperativeHandle(ref, createHandle, [deps]) 其实这个api也是ref

vue组件之间传值、父组件获取子组件的方法

1.子组件向父组件传值 子组件 <template>     <div class="app">        <input @click="sendMsg" type="button" value="给父组件传递值">     </div> </template> <script> export default {       data () {    

Django中Form表单之字段详解

Django中的Form表单 1.背景 平时我们在书写form表单时,经常都是手动的去写一些input标签,让用户输入一些功能,进行一些校验的判断,等等.Django中的form表单就能够帮我们去实现这些功能,比较便捷. 2.Django form表单的功能 1.生成页面可执行的HTML标签 2.对应户的数据进行校验 3.保留上次输入的内容 3.先用普通方式手写一个注册功能 1.views.py文件中 # 注册 def register(request): error_msg = ""

html5中form表单新增属性以及改良的input标签元素的种类

在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!DOCTYPE html><html> <head> <title>表单测试</title> <meta charset="utf-8" /> <!-- 在不支持h5的浏览器中,可以用CSS样式进行改写 --> &

angularjs中form表单提交验证

angular.module("MyApp",["ngMessages"]): <form name="formMyName" ng-submit="$ctrl.changePassword(formMyName)" ng-cloak novalidate> <--输入新密码--> <md-input-container md-no-float> <input name="n

vue父组件获取子组件的属性或方法

我遇到这样一个情况: 父组件代码片段: 1 <button @click="submit">提交</button> 2 <v-autoTextarea ref="autotext" placeholder="开始编辑..." class="content-input" fontSize="15px" 3 lineHeight="1.5" :value=&qu