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