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"/> < ...
随机推荐
- HDU 5311 Hidden String (优美的暴力)
Hidden String Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) ...
- Codeforces Round #336 (Div. 2) 608C Chain Reaction(dp)
C. Chain Reaction time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- C#根据规则生成6位随机码
#region 获得6位优惠码 zhy public static string CreatePromoCode(string code) { if (code == "") { ...
- [LeetCode][Java] Trapping Rain Water
题意: Given n non-negative integers representing an elevation map where the width of each bar is 1, co ...
- Spark SQL Catalyst源代码分析之UDF
/** Spark SQL源代码分析系列文章*/ 在SQL的世界里,除了官方提供的经常使用的处理函数之外.一般都会提供可扩展的对外自己定义函数接口,这已经成为一种事实的标准. 在前面Spark SQL ...
- 【Unity】用Shader编程实现3D红心
有些形状,即使没有3D美术设计师提供模型,也能够用代码生成. 对于想保持原创性不想借用他人模型的独立开发人员来说,这无非是一个非常重要的途径. 今天献给大家的是用Shader编程实现的一颗红心,寄托下 ...
- java调用restful接口的方法
Restful接口的调用,前端一般使用ajax调用,后端可以使用的方法如下: 1.HttpURLConnection实现 2.HttpClient实现 3.Spring的RestTemplate
- 【WIP】客户端JavaScript DOM
创建: 2017/10/12 初步完成: 2017/10/15 更新: 2017/10/14 标题加上[WIP],继续完成 [TODO] 补充暂略的, 搜[略] DOM树 概要 基本 ...
- CF1073C Vasya and Robot
CF题目难度普遍偏高啊-- 一个乱搞的做法.因为代价为最大下标减去最小的下标,那么可以看做一个区间的修改.我们枚举选取的区间的右端点,不难发现满足条件的左端点必然是不降的.那么用一个指针移一下就好了 ...
- [Swift通天遁地]二、表格表单-(7)电子邮件Mail:实现单元格左右滑动调出功能按钮
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...