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"/> < ...
随机推荐
- i=i+2 与i+=2
i=i+2 比 i+=2多了一次对变量 i 的运算.后者效率高
- 算法(Algorithms)第4版 练习 1.3.21
方法实现: //1.3.21 /** * find if some node in the list has key as its item field * * @param list the lin ...
- PYTHON 爬虫笔记七:Selenium库基础用法
知识点一:Selenium库详解及其基本使用 什么是Selenium selenium 是一套完整的web应用程序测试系统,包含了测试的录制(selenium IDE),编写及运行(Selenium ...
- 配置 git 以ssh公钥访问github
#生成ssh config touch .ssh/config chmod 600 config 填写: Host github.com User betachen Hostname ssh.gith ...
- 分享知识-快乐自己:Hibernate 关联映射
关联关系映射--概念: 关联关系是使用最多的一种关系,非常重要.在内存中反映为实体关系,映射到DB中为主外键关系. 实体间的关联,即对外键的维护.关联关系的发生,即对外键数据的改变. 外键:外面的主键 ...
- Linux 查看并删除.svn目录
1. find . -type d -name ".svn"|xargs rm -rf
- PC样式reset参考
/* html5doctor.com Reset Stylesheet */ * { padding:; margin:; list-style: none; } html, body, div, s ...
- Git Shell Warning
Warning: Permanently added 'github.com,192.30.252.120' <RSA> to the list of known hosts. The a ...
- 如何在asterisk中限制呼叫路数
在asterisk中,对于呼叫个数是可以通过call-limit进行限制的.限制办法是通过修改asterisk.conf中maxcalls参数,设置允许的最大呼叫数.这里的最大呼叫数是包括所有的呼 ...
- 【Python】Python figure显示的两种方式
1. 两种方式: 终端输出图像新窗口输出图像 2. 终端输出命令: %matplotlib inline 新窗口输出命令: %matplotlib qt5 注意此两个语句是命令行输入,若在spyder ...