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)

    }
      
    child: any = {}  //主要加这个
    onRef = (ref) => {
    this.child = ref
    }
    // 调用组件进行通信
    getDS = () => {
    this.child.toggle()

    }
    render(){
    return (
      <div>
        <button onClick={this.getDS}>父组件点击切换</button>
        <Child ref={this.onRef} />
      </div>

    )
    }
    }

    //子组件
    import * as React from 'react'
    import { Row, Col } from 'antd';
    import "./list.less"
    interface IProps {
    msg?: any
    MakeMoney?:any
    //ref?:any

    }
    interface IState {
    lg?: any

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

    }
    state = {
    lg: 6
    }
    toggle = () => {//父组件要调用的方法
    console.log('f')
    this.setState({
    lg: 12
    })
    }

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

      </div>
      )
    }
  • 相关阅读:
    转:SkipList跳表
    git操作
    JAVA小工具打包
    Java数字证书操作
    mysql创建数据库和用户
    解决node-sass安装不了的问题
    vscode + angular
    ng2 quickstart-primeng
    ng2 quickstart
    使用淘宝的npm代理下载模块
  • 原文地址:https://www.cnblogs.com/whlBooK/p/10811792.html
Copyright © 2011-2022 走看看