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>
)
}
react typescript 父组件调用子组件的更多相关文章
- react 父组件调用子组件方法
import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...
- React 父组件调用子组件的方法
父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...
- vue 父组件调用子组件内置方法
背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...
- Vue 父组件调用子组件的方法
qwq 前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...
- vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等
vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...
- 父组件调用子组件 viewChild
父组件调用子组件 1.在子组件的ts中声明一个变量 public lineout:any="你好,我是被父组件调用的子组件"; 2.在父组件的html中写入 (引入子组件) & ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
- vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- Vue3 父组件调用子组件的方法
Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...
随机推荐
- LeetCode 83. Remove Duplicates from Sorted List (从有序链表中去除重复项)
Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...
- 【翻译自mos文章】将expdp的dmp文件从asm磁盘组里边放到本地文件系统里边
将expdp的dmp文件从asm磁盘组里边放到本地文件系统里边 參考原文: How To Extract Datapump File From ASM Diskgroup To Local Files ...
- 箭头函数的 this
在非严格模式下,匿名函数和定时器中的 this 由于没有默认的宿主对象,因此指向 window: 而在严格模式下,匿名函数和定时器中的 this 由于没有默认的宿主对象,因此为 undefined. ...
- 配置hadoop集群一
花了1天时间最终把环境搭建好了.整理了一下,希望对想学习hadoop的有所帮助. 资料下载:http://pan.baidu.com/s/1kTupgkn 包括了linux虚拟机.jdk, hadoo ...
- 双logo
from aip import AipSpeech bd_k_l = ['11059852', '5Kk01GtG2fjCwpzEkwdn0mjw', 'bp6Wyx377Elq7RsCQZzTBgG ...
- UVALive 4212 - Candy
Little Charlie is a nice boy addicted to candies. He is even a subscriber to All Candies Magazine an ...
- AngularJS2.0 quick start——其和typescript结合需要额外依赖
AngularJS2 发布于2016年9月份,它是基于ES6来开发的. 运行条件! 由于目前各种环境(浏览器或 Node)暂不支持ES6的代码,所以需要一些shim和polyfill(IE需要)让ES ...
- bzoj2844
http://www.lydsy.com/JudgeOnline/problem.php?id=2844 线性基... 先把线性基搞出来,然后不断逼近答案,如果这个基比答案小了,那么说明要加上,同时加 ...
- PCB CS架构(工程系统)实现单点登入方法
社会的不断进步发展,分工也越来越细了.而我们工作接触的范围也越来越狭小了,但这不是倒退了,而是分工之细让人们在各个方面深耕细作.PCB企业软件系统发展路线同样也如此,随着我们PCB企业发展不断壮大,软 ...
- Akka源码分析-Cluster-ActorSystem
前面几篇博客,我们依次介绍了local和remote的一些内容,其实再分析cluster就会简单很多,后面关于cluster的源码分析,能够省略的地方,就不再贴源码而是一句话带过了,如果有不理解的地方 ...