最近在作一个公司的项目,使用的是react而后用了ant design,在作一个功能的时候使用了modal,modal里面还嵌套了一个子组件,就想子组件里的id能动态获取而后从接口拉数据,可是始终不行由于componentWillMount这个只进去的时候会渲染,后面就不会了。折腾了大半天也上了相关论坛,什么onRef 呀,或者直接带事件的方法,只要进了Modal都不行,后来终于发现一个modal的相关参数实现了。如下是具体代码:react
//这是点击事件 onChange = (e) => { // console.log(e); this.setState({ currentDevId: e.record.id, title:e.record.device_name, visible:true }); }
此处设置destroyOnClose={true}便可antd
<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接收 便可
或者还能够在态窗的取消按钮添加事件,以下this
resetFields() //重置一组输入控件的值(为 initialValue)与状态,如不传入参数,则重置全部组件
附正常状况父组件调用子组件事件的方法-直接上代码:
父组件:code
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> ) } }
子组件:component
import React from 'react'; export default class Child extends React.Component { componentDidMount(){ this.props.onRef(this) } myName = () =>{ alert(11111111111111) } render() { return( <div>设备巡检子组件....</div> ) } }