react 父组件调用子组件方法
import React from 'react'
import '../page1/header.css'
import { Table } from 'antd'
import Child from './child'//引入的子组件
export default class Header extends React.Component{
constructor(){
super()
}
}
onRef = (ref) => {//react新版本处理方式
this.child = ref
}
click = (e) => {
this.child.myName()
}
render(){
return (<div>
<Child onRef={this.onRef} />
<button onClick={this.click}>父组件调用子组件方法</button>
</div>
)
}
//子组件
import React from 'react'
export default class Header extends React.Component{
constructor(props){
super(props)
}
componentDidMount(){
this.props.onRef(this)
}
myName = () => alert('父组件调用子组件方法成功')
render(){
return (
<div className="header">
</div>
)
}
}
react 父组件调用子组件方法的更多相关文章
- 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"/> < ...
随机推荐
- The return type is incompatible with JspSourceDependent.getDependants():JasperException问题分析与解决方法
Linux下基于JSP的报表集成到项目中后,显示不出来,查看tomcat的日志.有例如以下报错信息: The return type is incompatible with JspSourceDep ...
- HDU 5305 Friends(简单DFS)
Friends Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Su ...
- Erlang下与其他程序和语言的通信机制(2)
前面聊了普通端口,今天聊下链入式驱动端口,以及NIFs. 链入式驱动端口 如上图所示,链入式驱动端口与Erlang虚拟机存在于同一个OS进程中. 在Erlang这边与普通端口类似,所有与链入式驱动端口 ...
- LeetCode 541. Reverse String II (反转字符串 II)
Given a string and an integer k, you need to reverse the first k characters for every 2k characters ...
- C++11系列-什么是C++11
什么是C++0x? C++0x是C++最新标准标准化过程中的曾用名,在这一系列文章中我们将介绍最新标准添加的一系列新的语言特性.在2011年9月份,C++0x正式由官方发布并命名C++11,现在很多编 ...
- oracle 分页方法
我分享两种: 1.用rownum select * from (select p.* , rownum rn from t_premium p where rn<= page * 10) a ...
- 69.资金管理-税率表管理extjs 页面
1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8&quo ...
- [App Store Connect帮助]一、 App Store Connect 使用入门(2)登录至 App Store Connect
请使用您的 Apple ID 登录 App Store Connect.如果您是具有“帐户持有人”职能的用户,请使用您用于加入“Apple 开发者计划”的 Apple ID 登录并添加其他用户至您的 ...
- Java命名规范(新手宝典)
很多刚开始学习Java的童鞋都不知道如何命名类文件,方法名,字段名,常量名等,今天抽出时间整理了了一下.大佬绕过 Java命名的组成规则:英文大小写字母,数字,$和_. 这里有几点需要注意: 不能以数 ...
- 【洛谷4933】大师(DP)
题目: 洛谷4933 分析: (自己瞎yy的DP方程竟然1A了,写篇博客庆祝一下) (以及特斯拉电塔是向Red Alert致敬吗233) 这里只讨论公差不小于\(0\)的情况,小于\(0\)的情况进行 ...