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"/> < ...
随机推荐
- GDIPlus绘制桌面歌词
功能介绍 採用GDIPlus绘制桌面歌词,相似酷狗.QQ音乐等软件.歌词支持纯色.两色渐变.三色渐变:支持高亮歌词. 实现方法 窗体部分:桌面歌词是个独立的背景透明窗体.能够移动位置,能够鼠标穿透.透 ...
- MapReduce04
===================== MapReduce内部机制:本地性 ===================== 什么是数据本地性(data locality)--------------- ...
- 一段shell脚本
//根据入参增加nginx反向代理#!/bin/bash#set -x log_path="./proc/logs/shellExecute.log"log_path_back=& ...
- 【POJ 3974】 Palindrome
[题目链接] http://poj.org/problem?id=3974 [算法] 解法1 : 字符串哈希 我们可以分别考虑奇回文子串和偶回文子串,从前往后扫描字符串,然后二分答案,检验可以用哈希 ...
- B1090 [SCOI2003]字符串折叠 区间dp
又一道区间dp,和上一篇类似,但是比他简单,这个只有两种转移方法,不是很复杂.直接判断是否为重复的串就行. 题干: Description 折叠的定义如下: . 一个字符串可以看成它自身的折叠.记作S ...
- bzoj3662
数学 其实我们发现不用每个数都去试一下,只要确定每个数字有几个就可以确定这个数.所以我们先搜索一下,然后检验. 但是这样太慢了,所以我们打表. 打出1-30的结果,然后取模. 打表的程序好像弄丢了.. ...
- 虚拟化技术概要之VMM结构
1. 概述 当前主流的 VMM (Virtual Machine Monitor) 实现结构可以分为三类: 宿主模型 (OS-hosted VMMs)Hypervisor 模型 (Hypervisor ...
- es6 import 与 export
1.export 命令 export 命令用于规定模块的对外接口. 一个模块就是一个独立的文件.该文件内部所有的变量,外部无法获取.要想外部能够读取模块内部的某个变量,就必须使用 export 关键字 ...
- jquery插件开发基本步骤
一.介绍 插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外一种机制:即给核心 ...
- Android 关于android.os.Build介绍
关于Build类的介绍 这个类为一个获取设备一些初始化信息的类,该类的主要信息都是通过一些static的字段获得: public static final String BOARD The name ...