当前位置 : 主页 > 网页制作 > React >

react typescript 子组件调用父组件

来源:互联网 收集:自由互联 发布时间:2021-06-15
//父组件 import * as React from ‘react‘ import { Input } from ‘antd‘ const Search = Input.Search import "./index.less" import Child from "./compon/list" interface IProps { MakeMoney?: () = void //暴露方法 } export default cla

//父组件

import * as React from ‘react‘
import { Input } from ‘antd‘
const Search = Input.Search
import "./index.less"
import Child from "./compon/list"
interface IProps {

MakeMoney?: () => void //暴露方法
}
export default class ProjectList extends React.Component<IProps>{
constructor(props: IProps) {
super(props)

}
MakeMoney(){  //子组件调用父组件的方法
alert("我在学习react!");
}
render(){
return (
<div>
<div className="Input_box">
<div style={{ marginBottom: 16 }}>
<Search
placeholder="搜索"
onSearch={value => console.log(value)}
onChange={this.Inpchange}
enterButton
/>
<button>点击切换</button>
</div>
</div>
<Child MakeMoney={this.MakeMoney}/>//子组件
</div>
)
}
}
//子组件
import * as React from ‘react‘
import { Row, Col } from ‘antd‘;
import "./list.less"
interface IProps {
msg?: any
MakeMoney?:any  //获取暴露的方法
}
interface IState {
lg?: any

}
export default class List extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props)

}
StudyMakeMoney=()=>{ // 调用父组件方法
this.props.MakeMoney();
}
render(){
const { lg } = this.state;
return (
<div>
<button onClick={this.StudyMakeMoney}>子组件</button>
  </div>
}
网友评论