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 ...
随机推荐
- GCC编译uboot出现(.ARM.exidx+0x0): undefined reference to `__aeabi_unwind_cpp_pr0'错误的解决的方法
/opt/arm-2010.09/bin/../lib/gcc/arm-none-linux-gnueabi/4.5.1/armv4t/libgcc.a(_bswapsi2.o):(.ARM.exid ...
- Ubuntu下用命令行快速打开各类型文件(转)
nautilus /media/pm/文档/book/system/必读nautilus /media/pm/文档/book/android/ndk 内核/framerwork/android wai ...
- C#使用Quartz.NET详解
Quartz.NET是一个开源的作业调度框架,是OpenSymphony 的 Quartz API的.NET移植,它用C#写成,可用于winform和asp.net应用中.它提供了巨大的灵活性而不牺牲 ...
- loj 101 最大流
冬令营送到我脸上的20分都没拿全 心态爆炸 冬令营前一天学的dinic 后一天才发出来 #include<iostream> #include<cstdio> #include ...
- [LibreOJ NOIP Round #1] 旅游路线
[题目链接] https://loj.ac/problem/539 [算法] 首先 , 我们用f[u][k]表示现在在景点u ,还有k元钱 , 最多能够走多少路 不难发现f[u][k] = max{ ...
- P1402 酒店之王 网络流
大水题,我自己瞎做就做出来了,没啥说的,zz建图,就是板子. 题干: 题目描述 XX酒店的老板想成为酒店之王,本着这种希望,第一步要将酒店变得人性化.由于很多来住店的旅客有自己喜好的房间色调.阳光等, ...
- 推荐给Web前端开发人员的一些书籍(从基础到架构阶段)
有很多人问我说作为一个前端开发人员都需要看一些什么书籍,尤其是刚入门的新手,今天我整理了一下推荐给大家,大佬绕过. HTML+CSS+JavaScript 网页设计 从入门到精通 作为一个前端新手,强 ...
- SpringBoot2.0整合SpringSecurity实现WEB JWT认证
相信很多做技术的朋友都做过前后端分离项目,项目分离后认证就靠JWT,费话不多说,直接上干活(写的不好还请多多见谅,大牛请绕行) 直接上代码,项目为Maven项目,结构如图: 包分类如下: com.ap ...
- Activity启动模式(GIF 动态演示)
本文首发在我的个人微信公众号:Android开发圈 引言 关于Activity的启动模式是面试高频问题,在平时开发中,作用也不小,所以还是很有必要搞懂这一块的知识.其实之前也有写过这个主题的文章,但是 ...
- node.js安装及其环境配置
nodejs: 实际上是采用google的chrome浏览器V8引擎,由C++编写的 本质上是一个javascript的运行环境 浏览器引擎可以解析js代码 nodejs可以解析js代码,没有浏览器端 ...