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()
}
}
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 子组件给父组件传值的更多相关文章
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- react子组件向父组件传值
子组件向父组件传值,注意父组件传递函数的时候必须绑定this到当前父组件(handleEmail={this.handleEmail.bind(this)}),不然会报错 /***实现在输入框输入邮箱 ...
- React篇-子组件调用父组件方法,并传值
react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...
- vue2.0 子组件和父组件之间的传值(转载)
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
- Vue 组件&组件之间的通信 之 子组件向父组件传值
子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...
- React子组件和父组件通信
React子组件和父组件通信包括以下几个方面: 子组件获取父组件属性:props或者state 子组件调用父组件的方法 父组件获取子组件的属性:props或者state 父组件调用子组件的方法 我们从 ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- Vue2.0 子组件和父组件之间的传值
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
- vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
随机推荐
- Linux经常使用命令002之搜索命令locate、whereis、which、find、grep
Linux经常使用命令002之搜索命令locate.whereis.which.find.grep -20150811 经常使用搜索命令 -------文件搜索命令---------- -->l ...
- 装饰者模式的学习(c#) EF SaveChanges() 报错(转载) C# 四舍五入 保留两位小数(转载) DataGridView样式生成器使用说明 MSSQL如何将查询结果拼接成字符串 快递查询 C# 通过smtp直接发送邮件 C# 带参访问接口,WebClient方式 C# 发送手机短信 文件 日志 写入 与读取
装饰者模式的学习(c#) 案例转自https://www.cnblogs.com/stonefeng/p/5679638.html //主体基类 using System;using System.C ...
- 使用openstack的虚拟机模版注意事项
openstack虚拟机模版(flavor)是一个非常奇怪的设计.讲讲我測试时遇到的问题,尽管说在project应用中虚拟机模版在開始时就定制好.后期可能做改动,可是改动时一定要注意,有以下几种情况: ...
- Struts2之类型转换器的使用
一.学习案例:通过在输入页面(input.jsp)用同一个输入框同一时候输入username和password,通过类型转换器在输出页面(output.jsp)分别输出username和passwor ...
- Boost Asioserver使用
今天主要想说道说道boost里面的网络通信库怎样设计和使用,由于近期一直在和网络一起工作,大数据处理和机器学习都离不开最后使用网络进行上线部署.先看看所有的源码吧. #include <cstd ...
- 跨平台C、C++代码注意的事项
在我们的开发中,跨平台的需求越来越强烈,怎样保持C/C++代码能在多个平台上编译,是一个比較值得研究的问题.关于跨平台的文章网上非常多,跨平台的库网上也非常多.那么我从自己的跨平台开发经验谈一谈自己的 ...
- java.lang.NoClassDefFoundError: org/apache/commons/lang/xwork/StringUtils
java.lang.NoClassDefFoundError: org/apache/commons/lang/xwork/StringUtils Struts2框架下使用JSON插件时.程序保存找不 ...
- RK平台Android4.4 添加一个新的遥控器支持以及添加特殊按键【转】
本文转载自:http://blog.csdn.net/coding__madman/article/details/52904063 版权声明:本文为博主原创文章,未经博主允许不得转载. 瑞芯微平台 ...
- RESTful设计原则和样例(开发前后台接口)
摘要 REST(表征性状态传输)设计风格;REST通常基于使用HTTP,URI协议和标准.使用URL标识资源,开发前后台接口.主要使用post,get方式 参考博文: http://www.cnblo ...
- Android webkit keyevent 事件传递过程
前言:基于android webview 上定制自己使用的可移植浏览器apk,遇到好多按键处理的问题.所以索性研究了一下keyevent 事件的传递流程. frameworks 层 keyevent ...