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

最新推荐文章于 2025-06-25 15:28:20 发布

转载最新推荐文章于 2025-06-25 15:28:20 发布 · 1.4w 阅读

10 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000016471047

文章标签：

#javascript #ui #ViewUI

本文介绍如何在 AntDesign 的 Modal 组件中实现子组件动态加载数据的功能。作者在项目中遇到子组件无法在 Modal 显示后动态获取数据的问题，并最终通过设置 `destroyOnClose` 属性为 `true` 解决。此外，还提供了父组件调用子组件事件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个公司的项目，使用的是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}即可

    <Modal
    title={"设备资料管理 - "+this.state.title}
    width={850}
    style={{ top: 20 }}
    visible={this.state.visible}
    onOk={this.handleOk}
    onCancel={this.handleCancel}
    destroyOnClose={true}
    okText="保存"
    cancelText="取消"
    >
        <Tabs>            
            <TabPane tab="基础信息" key="1" >
                <BasicInfo onRef={this.onRef} devid={this.state.currentDevId} />
            </TabPane>
            <TabPane tab="运行参数" key="2"><RunParams dvid={this.state.currentDevId} /></TabPane>
        </Tabs>
    </Modal>

然后子组件在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(
            <div>
                <Hz onRef={this.onRef} />
                <Button onClick={this.click} >设备巡检....</Button>
            </div>
        )
    }
}

子组件：

import React from 'react';

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

     myName = () =>{
      alert(11111111111111)

     }

    render() {
        return(
            <div>设备巡检子组件....</div>
        )
    }
}