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的更多相关文章

  1. vuejs2.0子组件改变父组件的数据

    在vue2.0之后的版本中,不允许子组件直接改变父组件的数据,在1.0的版本中可以这样操作的,但是往往项目需求需要改变父组件的数据,2.0也是可一个,区别是,当我们把父元素的数据给子组件时,需要传一个 ...

  2. react当中子组件改变父组件的状态

    子组件直接改变父组件传入的props值是不被允许的, 当需要在子组件当中改变父组件的某一个状态, 父组件传入一个改变状态的函数,然后在子组件当中调用函数即可

  3. Vue中子组件数据跟着父组件改变和父组件数据跟着子组件改变的方法

    一,子组件数据跟着父组件改变 父组件的代码 <template> <div class="home"> <img alt="Vue logo ...

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

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

  5. vue2.0 子组件props接受父组件传递的值,能不能修改的问题整理

    父组件代码: <!-- --> <template> <div class=''> <el-link type="danger">传 ...

  6. vue.js事件传值之子组件传向父组件以及$emit的使用

    在项目开发中,有时候会遇到一种需求比如是:在子组件中,通过一个事件,比如点击事件,去改变父组件中的某个值,下面来看看是怎么个流程 还是先截图目录结构 父组件为app.vue,components中的文 ...

  7. 子组件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 ...

  8. vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

    Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...

  9. vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件

    Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...

随机推荐

  1. sql server 2008 express 安装的时提示“重启计算机失败"

    sql server 2008 express 安装的时提示"重启计算机失败" 解决办法: 打开注册表编辑器(regedit.exe),在HKEY_LOCAL_MACHINE\SY ...

  2. OpenCV 学习笔记 06 SIFT使用中出现版权问题error: (-213:The function/feature is not implemented)

    1 错误原因 1.1 报错全部信息: cv2.error: OpenCV(4.0.1) D:\Build\OpenCV\opencv_contrib-4.0.1\modules\xfeatures2d ...

  3. 11G新特性 -- ASM Fast Mirror Resync

    ASM Fast Mirror Resync     在oracle 10g中,如果asm磁盘因为光纤.控制器发生故障而发生failure,asm将无法继续向该磁盘中写入数据.     asm会将发生 ...

  4. 苹果App Store审核指南中文翻译(更新至140227)

    前言 感谢您付出宝贵的才华与时间来开发iOS应用程程序.从职业与报酬的角度而言,这对于成千上万的开发员来说一直都是一项值得投入的事业,我们希望帮助您加入这个成功的组织.我们发布了<App Sto ...

  5. 物联网架构成长之路(4)-EMQ插件创建

    1. 说明 以下用到的知识,是建立在我目前所知道的知识领域,以后如果随着知识的拓展,不一定会更新内容.由于不是EMQ公司的人,EMQ的文档又很少,很多知识点都是靠猜的.2. 一些资料 架构设计 htt ...

  6. 【emWin】例程二十九:窗口对象——Messagebox

    简介: 使用MESSAGEBOX 小工具可在带有标题栏和“确定”按钮(必须按下才能关闭窗口)的 框架窗口中显示消息.本实验通过点击下图中的按键来创建一个Messagebox对话框. 触摸校准(上电可选 ...

  7. stm32之TIM+ADC+DMA采集50HZ交流信号

    http://cache.baiducontent.com/c?m=9d78d513d98207f04fece47f0d01d7174a02d1743ca6c76409c3e03984145b5637 ...

  8. JVM内存管理及垃圾回收【转】

    很多Java面试的时候,都会问到有关Java垃圾回收的问题,提到垃圾回收肯定要涉及到JVM内存管理机制,Java语言的执行效率一直被C.C++程序员所嘲笑,其实,事实就是这样,Java在执行效率方面确 ...

  9. T4 生成数据库实体类

    来源不详,整理如下: <#@ template language="C#" debug="True" hostspecific="True&qu ...

  10. Best Practices in Asynchronous Programming

    http://blog.stephencleary.com/ http://blogs.msdn.com/b/pfxteam/