React子组件怎么改变父组件的state
React子组件怎么改变父组件的state
1.父组件
class Father extends React.Component {
construtor(props){
super(props);
this.state={
isRed: 0
}
}
onChangeState(isTrue){
this.setState(isTrue)
}
render(){
<p>颜色:{this.state.isRed}</p>
<Child onClicked={this.onChangeState.bind(this)}/>
}
}
2.子组件
class Child extends React.Component {
render(){
<Button onClicked={()=>this.props.onClicked({isRed: 1})}/>
}
}
React子组件怎么改变父组件的state的更多相关文章
- vuejs2.0子组件改变父组件的数据
在vue2.0之后的版本中,不允许子组件直接改变父组件的数据,在1.0的版本中可以这样操作的,但是往往项目需求需要改变父组件的数据,2.0也是可一个,区别是,当我们把父元素的数据给子组件时,需要传一个 ...
- react当中子组件改变父组件的状态
子组件直接改变父组件传入的props值是不被允许的, 当需要在子组件当中改变父组件的某一个状态, 父组件传入一个改变状态的函数,然后在子组件当中调用函数即可
- Vue中子组件数据跟着父组件改变和父组件数据跟着子组件改变的方法
一,子组件数据跟着父组件改变 父组件的代码 <template> <div class="home"> <img alt="Vue logo ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- vue2.0 子组件props接受父组件传递的值,能不能修改的问题整理
父组件代码: <!-- --> <template> <div class=''> <el-link type="danger">传 ...
- vue.js事件传值之子组件传向父组件以及$emit的使用
在项目开发中,有时候会遇到一种需求比如是:在子组件中,通过一个事件,比如点击事件,去改变父组件中的某个值,下面来看看是怎么个流程 还是先截图目录结构 父组件为app.vue,components中的文 ...
- 子组件props接受父组件传递的值 能修改吗?
vue2.0 子组件props接受父组件传递的值,能不能修改的问题整理 父组件代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法
Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...
- vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件
Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...
随机推荐
- NodeJs相关系列文章
1.图片上传之FileAPI与NodeJs 2.NodeJs之调试 3.CentOS下使用NVM 4.NodeJs之进程守护 5.Ubuntu下使用nvm 6.NodeJs之pm2 7.NodeJs之 ...
- Spring Boot 应用 发布到Docker
Spring Boot 应用 先把命令行切换到Maven项目的根目录 E:\gitCode\galaxyguardians 通过mvn clean package命令打包应用程序 ,在E:\gitCo ...
- Spring-boot初始化创建(一)
Spring Boot 是什么 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人 ...
- 【emWin】例程三十二:窗口对象———Progbar
简介: 进度条通常在应用程序中用于实现虚拟化:本例程实现液晶亮度显示 . 触摸校准(上电可选择是否进入校准界面) 实验现象: 实验指导书及代码包下载: 链接:http://pan.baidu.com/ ...
- kafka性能测试1.0.0
kafka提供工具kafka-producer-perf-test.sh用以压测, 参数 说明 messages 生产者发送总的消息数量 message-size 每条消息大小 batch-size ...
- (转)基于形状匹配的Halcon算子create_shape_model
HDevelop开发环境中提供的匹配的方法主要有三种,即Component-Based.Gray-Value-Based.Shape-Based,分别是基于组件(或成分.元素)的匹配,基于灰度值的匹配 ...
- Java知多少(12)运算符
Java中的运算符和C/C++相差无几. 数学运算符 数学运算,结果为一个数值.见下表: 运算符 说明 举例 + 加法 1 + 2 - 减法 4 - 3.4 * 乘法 7 * 1.5 / 除法 3.5 ...
- for循环 while循环 break跳出循环 continue结束本次循环 exit退出整个脚本
- Android四大组件之——Activity(一)定义、状态和后退栈(图文详解)
什么是Activity 关键字:应用组件.四大组件.用户界面,交互. An Activity is an application component that provides a screen wi ...
- Git 学习笔记--拉取远程分支到本地
1.查看远程分支,和上面的第一步相同2. 从远程获取最新版本到本地 git fetch origin master:temp git fetch origin master:temp 这句命令的意思是 ...