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()

  }

}

handleClick = (val) => {  //val就是子组件传的值1
  this.setState({
    mess:val
  })
}

render(){

  return (<div>

     <Child   GETState= {this.handleClick.bind(this)}/>

  </div>

  )

}

// 子组件

import React from 'react'

export default class Header extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      a:1
  }
}

render(){
console.log(this.props.msg)
return (
<div className="header">
  <div onClick={() =>this.props.GETState(this.state.a)}>给父元素传值</div>    //点击就把当前页的值传给父组件

</div>
)
}
}

react 子组件给父组件传值的更多相关文章

  1. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  2. react子组件向父组件传值

    子组件向父组件传值,注意父组件传递函数的时候必须绑定this到当前父组件(handleEmail={this.handleEmail.bind(this)}),不然会报错 /***实现在输入框输入邮箱 ...

  3. React篇-子组件调用父组件方法,并传值

    react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...

  4. vue2.0 子组件和父组件之间的传值(转载)

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

  5. Vue 组件&组件之间的通信 之 子组件向父组件传值

    子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...

  6. React子组件和父组件通信

    React子组件和父组件通信包括以下几个方面: 子组件获取父组件属性:props或者state 子组件调用父组件的方法 父组件获取子组件的属性:props或者state 父组件调用子组件的方法 我们从 ...

  7. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  8. 【转】Vue组件一-父组件传值给子组件

    Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...

  9. Vue2.0 子组件和父组件之间的传值

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

  10. vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

随机推荐

  1. C# DateTime.Now和DateTime.UtcNow的区别

    DateTime.UtcNow.ToString()输出的是0时区的事件(通俗点就是格林威治时间的当前时间),DateTime.Now.ToString()输出的是当前时区的时间,我们中国使用的是东八 ...

  2. LeetCode 359. Logger Rate Limiter (记录速率限制器)$

    Design a logger system that receive stream of messages along with its timestamps, each message shoul ...

  3. ListView布局之View复用原理举例

    1.简单介绍: ListView是android开发中经常使用的控件,系统自带的那些样式,我就不列举了. 今天主要看一下.一个模仿系统历史通话记录的ListView. 效果例如以下: 上面ListVi ...

  4. kafka01

    消息队列松耦合 消息队列

  5. 如何利用UDP协议封装一个数据包

    在如何封装一个数据包上,是一个非常细致的问题,而利用UDP协议来封装的话,是比较简单,让我们一步步来分析典型的TCP/IP协议.一般来说一个典型的一个数据包,包括以太网MAC头+网络层IP数据头+传输 ...

  6. Android TP(三)【转】

    本文转载自:http://blog.csdn.net/bi511304183/article/details/9303259 平台信息:内核:linux2.6/linux3.0系统:android/a ...

  7. tiny4412 裸机程序 五、控制icache【转】

    本文转载自:http://blog.csdn.net/eshing/article/details/37115411 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   一 ...

  8. MSP430:管脚的第二功能选择

    之前在使用PWM,AD时候用到过第二功能,不过都是copy没有注意过PXSEL究竟怎么设置,今天在设置晶振管脚时候遇到了麻烦,细致看了一下其实很简单,在SPEC的最后详细讲了每个管脚如何设置为其他功能 ...

  9. Python3基础复习

    目录 基本语法 运算符 输出格式 数据类型 数据结构 函数 面向对象 补充 异常 模块和包 文件 时间 线程和进程 基本语法 基本语法只列举与Java不一样的. 运算符 and, or而非 & ...

  10. IP V4 和 IP V6 初识

    IP V4    是互联网协议的第四版 地址长度为32位,4字节,用十进制表示 格式为:A.B.C.D 最大的问题在于网络地址资源有限,严重制约了互联网的应用和发展 IP V6    是互联网协议的I ...