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"/> < ...
随机推荐
- spring cloud初识
spring cloud是spring中的一个快速开发框架.本实例采用spring+maven来配置一个简单的spring开发实例. 1.首先安装java和maven环境. ①.安装java,不做过多 ...
- 【python】用python脚本Paramiko实现远程执行命令、下载、推送/上传文件功能
Paramiko: paramiko模块,基于SSH用于连接远程服务器并执行相关操作. SSHClient: 用于连接远程服务器并执行基本命令 SFTPClient: 用于连接远程服务器并执行上传下载 ...
- CodeForces - 922E Birds —— DP
题目链接:https://vjudge.net/problem/CodeForces-922E E. Birds time limit per test 1 second memory limit p ...
- BZOJ 1230 [Usaco2008 Nov]lites 开关灯:线段树异或
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1230 题意: 有n盏灯,一开始全是关着的. 有m次操作(p,a,b).p为0,则将区间[a ...
- chrome浏览器常用快捷键
chrome浏览器常用快捷键 一.总结 一句话总结: Ctrl + j:打开“下载内容”页 Ctrl + t:打开新的标签页,并跳转到该标签页 Ctrl + d:将当前网页保存为书签 1.在新标签页中 ...
- nodejs && apidoc
1. 安装nodejs http://www.nodejs.org 源码编译 configure —prefix=/usr/local/nodejs make ...
- listen 77
Your Dog Wants YOUR Food Does your puppy turn his nose up at his own chow—because he wants some of w ...
- UnicodeEncodeError: 'ascii' codec can't encode characters in position 0-3: ordinal not in range(128)
py文件直接在cmd窗口用python命令执行时正常:代码逐句在ipython中也正常:但是, 在wingIDE中运行报错“UnicodeEncodeError: 'ascii' codec can' ...
- SpringBoot 版本升级后报错 Cannot instantiate interface org.springframework.context.ApplicationContextInitializer
本篇博客纯粹讲我遇到这个问题的解决以及思考,如果你想知道解决方法,可以直接看正确解决方案部分.因为是前端写的,所以可能有些明显的内容很容易就看出来了. 首先:升级后更新其他依赖,以及Applicati ...
- Stop logging "internal dummy connection" in Apache
Apache 2.x keeps child processes alive by creating internal connections which appear in the log file ...