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 ...
随机推荐
- HashMap中的hash算法总结
前言 算法一直是我的弱项,然而面试中基本是必考的项目,刚好上次看到一个HashMap的面试题,今天也来学习下 HashMap中的hash算法是如何实现的. 数学知识回顾 << : 左移运算 ...
- 微信小程序开发填坑
1.模拟器和真机的差异 在开发的过程中,在模拟器上表现得好好的,在真机上却出问题的例子数不胜数.譬如动画的使用,cover-view上面使用定位,在模拟器好好的,在真机却错乱等等等等.造成这些错乱主要 ...
- 物联网架构成长之路(23)-Docker练习之Elasticsearch服务搭建
0. 前言 最近基本都是学一些环境配置,和一些中间件的安装与配置.没有实际编写代码.可能看起来有点水,我对自己的学习方式是,先要了解各个中间件的安装配置以及简单使用,理论应用场景,然后我在小项目中,逐 ...
- Summary Checklist for Run-Time Kubernetes Security
Here is a convenient checklist summary of the security protections to review for securing Kubernetes ...
- 详解CUDA编程
CUDA 是 NVIDIA 的 GPGPU 模型,它使用 C 语言为基础,可以直接以大多数人熟悉的 C 语言,写出在显示芯片上执行的程序,而不需要去学习特定的显示芯片的指令或是特殊的结构.” 编者注: ...
- fiddler4 使用教程
Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据,Fiddler包含了一个强大的基于事件脚本的子系统, ...
- [转]深刻理解Python中的元类(metaclass)以及元类实现单例模式
使用元类 深刻理解Python中的元类(metaclass)以及元类实现单例模式 在看一些框架源代码的过程中碰到很多元类的实例,看起来很吃力很晦涩:在看python cookbook中关于元类创建单例 ...
- python学习笔记(23)——python压缩bin包
说明(2017-12-25 10:43:20): 1. CZ写的压缩bin包代码,记下来以后好抄. # coding:utf-8 ''' Created on 2014年8月14日 @author: ...
- 【九天教您南方cass 9.1】 07 绘制与标注圆曲线和细部点的方法
同学们大家好,欢迎收看由老王测量上班记出品的cass9.1视频课程 我是本节课主讲老师九天. 我们讲课的教程附件也是共享的,请注意索取测量空间中. [点击索取cass教程]5元立得 (给客服说暗号:“ ...
- 查看SQL SERVER数据库的连接数
1,查看连接到‘TestDB2’数据库的连接 select * from master.dbo.sysprocesses where dbid = DB_ID('TestDB2') *查询某个数据库用 ...