使用ant design的modal中嵌入form表单,动态获取数据

Forelax 发布于2019-08-23 12:04 / 1436人阅读

摘要：最近在做一个公司的项目，使用的是然后用了，在做一个功能的时候使用了里面还嵌套了一个子组件，就想子组件里的能动态获取然后从接口拉数据，但是始终不行因为这个只进去的时候会渲染，后面就不会了。

最近在做一个公司的项目，使用的是react然后用了ant design，在做一个功能的时候使用了modal,modal里面还嵌套了一个子组件，就想子组件里的id能动态获取然后从接口拉数据，但是始终不行因为componentWillMount这个只进去的时候会渲染，后面就不会了。折腾了大半天也上了相关论坛，什么onRef 呀，或者直接带事件的方法，只要进了Modal都不行，后来终于发现一个modal的相关参数实现了。以下是具体代码：

    //这是点击事件
    onChange = (e) => {
        // console.log(e);
        this.setState({
            currentDevId: e.record.id, 
            title:e.record.device_name,
            visible:true
        });
    }

此处设置destroyOnClose={true}即可

然后子组件在componentWillMount里面通过Props接收即可
或者还可以在态窗的取消按钮添加事件，如下

resetFields()  //重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件

附正常情况父组件调用子组件事件的方法-直接上代码：
父组件：

import React from "react";
import {Button} from "antd";
import Hz from "./Child";

export default class Inspect extends React.Component {

    onRef = (ref) => {
        this.child = ref
    }

    click = (e) => {
        // this.child.myName()
    }

    render() {
        return(
            
                
                
            
        )
    }
}

子组件：

import React from "react";

export default class Child extends React.Component {
    
    componentDidMount(){
        this.props.onRef(this)
    }

     myName = () =>{
      alert(11111111111111)

     }

    render() {
        return(
            设备巡检子组件....
        )
    }
}

云服务器 GPU云服务器 js获取form表单数据 js获取form表单提交数据 Ant Design ant-design

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97928.html

长期更新，记录一下近期工作中涉及到的内容（DvaJs Ant Design）

摘要：表单域表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发，请尝试使用将下拉弹层渲染节点固定在触发器的父元素中。 DvaJs dispatch在 dva 中，connect Model 的组件通过 props 可以访问到 dispatch，可以调用 Model 中的 Reducer 或者 Effects...

MadPecker 2019-08-26 13:54 评论0 收藏0
Dva + Ant Design 前后端分离之 React 应用实践

摘要：数据缓存对于一个应用来说，缓存是很重要的一步。所以，比较常见的方法就是将数据缓存在中。什么时候做数据缓存例用户信息缓存参见在中配置了检测中的是否存在。源站链接 https://tkvern.com 继 Rails 从入门到完全放弃拥抱 Elixir + Phoenix + React + Redux 这篇文章被喷之后，笔者很长一段时候没有上社区逛了。现在 tkvern 又回归了，给...

tainzhi 2019-08-20 14:03 评论0 收藏0
Ant-Design-组件-——-Form表单（一）

摘要：擅长网站建设微信公众号开发微信小程序开发小游戏制作企业微信制作建设，专注于前端框架服务端渲染技术交互设计图像绘制数据分析等研究。 Ant Design of React @3.10.9 拉取项目 luwei.web.study-ant-design-pro, 切换至 query 分支，可看到 Form 表单实现效果实现一个查询表单 showImg(https://segmentfau...

trilever 2019-08-23 14:28 评论0 收藏0
Vue高效UI组件库—iView开发实践

摘要：它的文档也是相当详细，每个功能都配有详细说明和实例代码，直接复制就可以使用，我们也计划在明年启动英文文档翻译计划。明年会启动英文文档翻译计划，也希望喜欢和支持，同时英语不错的同学可以加入我们，一起参与翻译。前段时间在微软参加活动，分享了 TalkingData 开源的基于 Vue.js 的高效 UI 组件库 iView 的一些开发经验，现整理成文，和大家探讨。 showImg(htt...

wean 2019-08-21 14:43 评论0 收藏0
Ant design pro 开发笔记 - 表单和数据绑定

摘要：支持表单双向绑定，开发过程中无需通过回调函数去获取组件的值，通过可以自动完成数据绑定的功能。如果我们通过获取了数据之后，表单数据不会发生变化。注意使用这个函数必须用封装需要绑定的字段。 antd支持表单双向绑定，开发过程中无需通过onChange()回调函数去获取组件的值，通过 getFieldDecorator() 可以自动完成数据绑定的功能。 { getFieldDecor...

zsy888 2019-08-22 17:31 评论0 收藏0