antd如何获取表单的值_Antd如何通过父组件直接获取子组件内表单值

在react开发过程中，难免会遇到在父组件中获取子组件中的值，如在创建一个对话框提交表单的时候，我们应该怎么来实现通过点击antd 中modal组件的确定按钮获取表单的值去发送AJAX，下面直接上代码：

子组件：

import React, { Component } from "react";

import { Form, Input } from 'antd';

class BaseForm extends Component {

render() {

const { getFieldDecorator } = this.props.form;

return (

{getFieldDecorator("equipmentName")()}

{getFieldDecorator("type")()}

{getFieldDecorator("test")()}

);

}

export default Form.create()(BaseForm)

父组件:

import React, { Component } from "react";

import { Modal } from "antd";

import BaseForm from "./components/baseForm";

class componentName extends Component {

state = {

visible: false

};

render() {

const { visible } = this.state;

return (

bodyStyle={{ maxHeight: "500px", overflowY: "scroll" }}

title="title"

visible={visible}

onOk={this.handleOk}

onCancel={() => this.setState({ visible: false })}

);

}

// 通过wrappedComponentRef获取子组件的ref

saveFormRef = formRef => {

this.formRef = formRef;

};

handleOk = () => {

const form = this.formRef.props.form;

form.validateFields((err, fieldsValue) => {

if (!err) {

console.log(fieldsValue);

}

});

};

}

export default componentName;

总结：通过antd官方文档给出的wrappedComponentRef去绑定子组件的ref实现父组件获取子组件表单值，至此，我们就可以获取到我组件中的值了，当然我们也可以把form表单和Modal对话框都封装成一个通用的组件，使用起来会更加的方便。

antd如何获取表单的值_Antd如何通过父组件直接获取子组件内表单值相关推荐

antd如何获取表单的值_antd 父组件获取子组件中form表单的值
还是拿代码来讲吧,详情见注释子组件 import React, { Component } from 'react'; import { Form, Input } from 'antd'; con ...
ajax如何提交多表单的值_Java Web初学者探索学习笔记7—矛盾解决方案：表单标签验证与ajax提交...
这段时间前端开发过程中,关于<form>表单下的输入框信息验证和数据提交问题出现矛盾. 问题描述: 表单下利用<input type="text" pattern ...
Jquery中获取表单的值并提交
今天写了一个ajax的交互,通过获取表单的值,自己组织post的方式提交. 但是却出现了提交的值为空,后来检查后发现,在提交表单的值得处理的时机有些问题. 一开始先是获取了值,然后在单击提交按钮后传值 ...
php+获取jq表单数据类型,jquery怎么获取表单标签值
在日常开发过程中,有许多用到表单的地方.比如登录,注册,比如支付,填写订单,比如后台管理等等. 使用jQuery来获取表单的值是比较常见的做法. 常见表单单行文字域: 密码域: 单选:男女男女 ...
java 获取js元素,表单元素值获取方式js及java方式的简单实例
表单元素值获取方式js及java方式的简单实例这里有新鲜出炉的 Javascript 教程,程序狗速度看过来! JavaScript 客户端脚本语言 Javascript 是一种由 Netscape ...
vue 给form表单赋值_vue获取form表单的值示例
vue获取form表单的值示例这里使用的是Element-ui组件 html: JS: var phone = this.phone; var password = this.password; v ...
【jQuery】使用jquery.form.js，获取提交表单返回值
jQuery表单库介绍实现 html 中提交表单并实现不跳转页面处理返回值 jQuery表单库(jquery.form.js库)以jQuery为基础,用于处理表单AJAX提交,使得表单AJAX提交简 ...
rails设置表单默认值amp;amp;隐藏表单
需求: 用户没有登录时游客评论,需要游客输入用户名和评论内容:当用户已登录时,读取session获取用户名,隐藏输入用户名的表达,用户直接发表评论. 用户评论代码: <h2>Add a c ...
js入门·表单详解一（修改表单属性，修改表单元素值）
实在javascript入门·Document对象入门讲解(访问表单,创建新页,获取页标题) 一文中,我们已经把表单的一些基本访问等弄清楚了,下面我们深入的学下表单的属性以及对表单元素的简单操作! 演 ...
jeecg-boot ant组件表单的值的操作
jeecg-boot中ant表单的常用操作 jeecg-boot生成的页面使用v-decorator绑定数据,无法直接操作数据,可以用下面的方法来操作. 获取一个表单中的某值 this.form.ge ...

antd如何获取表单的值_Antd如何通过父组件直接获取子组件内表单值

antd如何获取表单的值_Antd如何通过父组件直接获取子组件内表单值相关推荐

最新文章

热门文章