使用ant design的modal中嵌入form表單,動(dòng)態(tài)獲取數(shù)據(jù)

Forelax 發(fā)布于2019-08-23 12:04 / 1529人閱讀

摘要：最近在做一個(gè)公司的項(xiàng)目，使用的是然后用了，在做一個(gè)功能的時(shí)候使用了里面還嵌套了一個(gè)子組件，就想子組件里的能動(dòng)態(tài)獲取然后從接口拉數(shù)據(jù)，但是始終不行因?yàn)檫@個(gè)只進(jìn)去的時(shí)候會(huì)渲染，后面就不會(huì)了。

最近在做一個(gè)公司的項(xiàng)目，使用的是react然后用了ant design，在做一個(gè)功能的時(shí)候使用了modal,modal里面還嵌套了一個(gè)子組件，就想子組件里的id能動(dòng)態(tài)獲取然后從接口拉數(shù)據(jù)，但是始終不行因?yàn)閏omponentWillMount這個(gè)只進(jìn)去的時(shí)候會(huì)渲染，后面就不會(huì)了。折騰了大半天也上了相關(guān)論壇，什么onRef 呀，或者直接帶事件的方法，只要進(jìn)了Modal都不行，后來(lái)終于發(fā)現(xiàn)一個(gè)modal的相關(guān)參數(shù)實(shí)現(xiàn)了。以下是具體代碼：

    //這是點(diǎn)擊事件
    onChange = (e) => {
        // console.log(e);
        this.setState({
            currentDevId: e.record.id, 
            title:e.record.device_name,
            visible:true
        });
    }

此處設(shè)置destroyOnClose={true}即可

然后子組件在componentWillMount里面通過(guò)Props接收即可
或者還可以在態(tài)窗的取消按鈕添加事件，如下

resetFields()  //重置一組輸入控件的值（為 initialValue）與狀態(tài)，如不傳入?yún)?shù)，則重置所有組件

附正常情況父組件調(diào)用子組件事件的方法-直接上代碼：
父組件：

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(
            設(shè)備巡檢子組件....
        )
    }
}

云服務(wù)器 GPU云服務(wù)器 js獲取form表單數(shù)據(jù) js獲取form表單提交數(shù)據(jù) Ant Design ant-design

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/97928.html

相關(guān)文章

長(zhǎng)期更新，記錄一下近期工作中涉及到的內(nèi)容（DvaJs Ant Design）

摘要：表單域表單一定會(huì)包含表單域，表單域可以是輸入控件，標(biāo)準(zhǔn)表單域，標(biāo)簽，下拉菜單，文本域等。如果發(fā)現(xiàn)下拉菜單跟隨頁(yè)面滾動(dòng)，或者需要在其他彈層中觸發(fā)，請(qǐng)嘗試使用將下拉彈層渲染節(jié)點(diǎn)固定在觸發(fā)器的父元素中。 DvaJs dispatch在 dva 中，connect Model 的組件通過(guò) props 可以訪問(wèn)到 dispatch，可以調(diào)用 Model 中的 Reducer 或者 Effects...

MadPecker 2019-08-26 13:54 評(píng)論0 收藏0
Dva + Ant Design 前后端分離之 React 應(yīng)用實(shí)踐

摘要：數(shù)據(jù)緩存對(duì)于一個(gè)應(yīng)用來(lái)說(shuō)，緩存是很重要的一步。所以，比較常見(jiàn)的方法就是將數(shù)據(jù)緩存在中。什么時(shí)候做數(shù)據(jù)緩存例用戶信息緩存參見(jiàn)在中配置了檢測(cè)中的是否存在。源站鏈接 https://tkvern.com 繼 Rails 從入門(mén)到完全放棄擁抱 Elixir + Phoenix + React + Redux 這篇文章被噴之后，筆者很長(zhǎng)一段時(shí)候沒(méi)有上社區(qū)逛了。現(xiàn)在 tkvern 又回歸了，給...

tainzhi 2019-08-20 14:03 評(píng)論0 收藏0
Ant-Design-組件-——-Form表單（一）

摘要：擅長(zhǎng)網(wǎng)站建設(shè)微信公眾號(hào)開(kāi)發(fā)微信小程序開(kāi)發(fā)小游戲制作企業(yè)微信制作建設(shè)，專注于前端框架服務(wù)端渲染技術(shù)交互設(shè)計(jì)圖像繪制數(shù)據(jù)分析等研究。 Ant Design of React @3.10.9 拉取項(xiàng)目 luwei.web.study-ant-design-pro, 切換至 query 分支，可看到 Form 表單實(shí)現(xiàn)效果實(shí)現(xiàn)一個(gè)查詢表單 showImg(https://segmentfau...

trilever 2019-08-23 14:28 評(píng)論0 收藏0
Vue高效UI組件庫(kù)—iView開(kāi)發(fā)實(shí)踐

摘要：它的文檔也是相當(dāng)詳細(xì)，每個(gè)功能都配有詳細(xì)說(shuō)明和實(shí)例代碼，直接復(fù)制就可以使用，我們也計(jì)劃在明年啟動(dòng)英文文檔翻譯計(jì)劃。明年會(huì)啟動(dòng)英文文檔翻譯計(jì)劃，也希望喜歡和支持，同時(shí)英語(yǔ)不錯(cuò)的同學(xué)可以加入我們，一起參與翻譯。前段時(shí)間在微軟參加活動(dòng)，分享了 TalkingData 開(kāi)源的基于 Vue.js 的高效 UI 組件庫(kù) iView 的一些開(kāi)發(fā)經(jīng)驗(yàn)，現(xiàn)整理成文，和大家探討。 showImg(htt...

wean 2019-08-21 14:43 評(píng)論0 收藏0
Ant design pro 開(kāi)發(fā)筆記 - 表單和數(shù)據(jù)綁定

摘要：支持表單雙向綁定，開(kāi)發(fā)過(guò)程中無(wú)需通過(guò)回調(diào)函數(shù)去獲取組件的值，通過(guò)可以自動(dòng)完成數(shù)據(jù)綁定的功能。如果我們通過(guò)獲取了數(shù)據(jù)之后，表單數(shù)據(jù)不會(huì)發(fā)生變化。注意使用這個(gè)函數(shù)必須用封裝需要綁定的字段。 antd支持表單雙向綁定，開(kāi)發(fā)過(guò)程中無(wú)需通過(guò)onChange()回調(diào)函數(shù)去獲取組件的值，通過(guò) getFieldDecorator() 可以自動(dòng)完成數(shù)據(jù)綁定的功能。 { getFieldDecor...

zsy888 2019-08-22 17:31 評(píng)論0 收藏0