react父组件调用子组件方法
把子组件的参数回传到父组件中,并且赋值给子组件的一个实例方法.
参考React中文网: http://www.css88.com/react/docs/refs-and-the-dom.html
import React, {Component} from 'react'; export default class Parent extends Component {
render() {
return(
<div>
<Child onRef={this.onRef} />
<button onClick={this.click} >click</button>
</div>
)
} onRef = (ref) => {
this.child = ref
} click = (e) => {
this.child.myName()
} } class Child extends Component {componentDidMount(){
//必须在这里声明,所以 ref 回调可以引用它
this.props.onRef(this)
} myName = () => alert('我的名字') render() {
return ('lalalala')
}
}
react父组件调用子组件方法的更多相关文章
- 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 ...
- react中直接调用子组件的方法(非props方式)
我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...
- 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 (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...
- 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"/> < ...
随机推荐
- AFNetworking3.0使用简介
注意到咱们集成的版本为3.0.4. 下面的类已从AFNetworking 3.0中废弃: AFURLConnectionOperation AFHTTPRequestOperation AFHTTPR ...
- IO多路复用之Reactor模式
首先,我们来看看同步和异步. 在处理 IO 的时候,阻塞和非阻塞都是同步 IO.只有使用了特殊的 API 才是异步 IO. 接下来,我们来看看Linux下的三大同步IO多路复用函数 fcntl(fd, ...
- 《C prime plus (第五版)》 ---第11章 字符串和字符串函数
11-1:字符串表示和字符串I/O 1.首先先通过一个整体的例子来初步了解建立,读入和输出字符串的几种方式. #include<stdio.h> #define MSG "你一定 ...
- 项目发布之后 总提示有一个.DLL找不到或不匹配
最近发布项目(.net,winform)总提示有一个.dll文件找不到或者不匹配 但是在本地调试是正常的 这个.dll,原来是从.net组件中引用到项目的,后来我将此.dll文件从网上下载,然后在项目 ...
- 在datax之前版本中添加filewriter并创建job时出现问题
问题描述:
- myeclipse内存不足的处理
Myeclipse内存溢出解决方案 1.tomcat内存扩展 修改tomcat中bin目录下catalina.bat文件在echo Using CATALINA_BASE: "%CATAL ...
- HTML布局之左右结构,左边固定右边跟据父元素自适应
HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管 ...
- HTML5实现中国象棋游戏(无人能敌)
1. [代码][JavaScript]代码 var AI = AI||{}; AI.historyTable = {}; //历史表 //人工智能初始化AI.init = func ...
- Cocos2d-x中定时器的使用
CCTimer:轻量级的计时器 CCTimer (void) ccTime getInterval (void) void setInterval (ccTime fInterval) bool ...
- 什么是Grunt
Grunt,简而言之,就是运行在Node.js上面的任务管理器(task runner),其可以在任何语言和项目中自动化指定的任务.我们可通过npm来安装Grunt和Grunt插件 为什么使用Grun ...