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. Main.storyboard: WKWebView before iOS 11.0 (NSCoding support was broken in previous versions)

    在工程里用  故事板写了 wkwebview  如果运行在 ios11以下 就会报这个错误,如果要支持iOS 11 以下的用户,请重写View部分,使用代码调用WKWebView,而不用使用故事版来加 ...

  2. MySQL权限和用户安全

    MySQL访问控制分为两个阶段阶段1: 检查用户是否可以连接到mysql server 阶段2: 检查用户执行的sql是否已经被授权

  3. css中border-radius用法详解

    border-radius:由浮点数字和单位标识符组成的长度值.border-top-left-radius --- 左上border-top-right-radius --- 右上border-bo ...

  4. 修改ip导致服务不可用

    修改ip导致服务不可用 1.修改hostsvi /etc/hosts 修改ip地址 2.lsnrctl start 后会发现The listener supports no services,解决方案 ...

  5. java框架篇---hibernate之缓存机制

    一.why(为什么要用Hibernate缓存?) Hibernate是一个持久层框架,经常访问物理数据库. 为了降低应用程序对物理数据源访问的频次,从而提高应用程序的运行性能. 缓存内的数据是对物理数 ...

  6. 使用apktool.jar工具反编译和回编译Android APK 终端命令模式

    1.工具准备 工具可以网上搜索下载新版本,也可以从这里Download:https://github.com/FlymeOS/tools/blob/lollipop-5.1/reverses/apkt ...

  7. sql server 获取动态sql输出结果

    不带输出结果 我们一般会这样写 例子:一个输出6位递增号码结果 ALTER proc GetCode ), ) as declare @sqlstring nvarchar(max) set @sql ...

  8. vue.js是什么

    Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习, ...

  9. 使用Three.js里的各种光源

    1.three.js库提供的光源 three.js库提供了一些列光源,而且没种光源都有特定的行为和用途.这些光源包括: 光源名称/描述 AmbientLight(环境光)/这是一种基础光源,它的颜色会 ...

  10. Android异步处理系列文章四篇之二 使用AsyncTask异步更新UI界面

    Android异步处理一:使用Thread+Handler实现非UI线程更新UI界面Android异步处理二:使用AsyncTask异步更新UI界面Android异步处理三:Handler+Loope ...