• 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>

    }
  • 相关阅读:
    136-如何访问redis数据库
    135-如何实现result风格
    134-SpringMVC中的值,会有一个默认值
    133-this知识点
    132-SpringBoot中的请求方法
    034-405是什么错误?
    131-逆向工程配置文件
    SQL---实验一
    《将博客搬至CSDN》
    正则表达式1---QQ号合法性判断
  • 原文地址:https://www.cnblogs.com/whlBooK/p/10811395.html
Copyright © 2020-2023  润新知