zoukankan      html  css  js  c++  java
  • react typescript 子组件调用父组件

    //父组件

    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>

    }
  • 相关阅读:
    xhr1.0和xhr2.0的区别
    Java10-堆和栈
    Java09-函数
    Java08-函数
    java基础7-流程控制3
    Java基础-流程控制2
    Java基础—流程控制1
    breadcrumbs面包屑是啥?
    Font test 字体大小测试用JS代码实现
    数据库密码要BS64才能登录
  • 原文地址:https://www.cnblogs.com/whlBooK/p/10811395.html
Copyright © 2011-2022 走看看