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 ...
随机推荐
- python + django + dwebsocket 实现简单的聊天室
使用库dwebsocket,具体参考此处 views.py: from dwebsocket.decorators import accept_websocket,require_websocket ...
- PHP可变参数
0x00 缘起 在laravel的源码里经常可以看到下面的函数形式 $func(...$args) 0x01 可变参数旧写法 这表示$func支持可变参数,在php5.6之前则是在函数体内调用 fun ...
- Android调用相机拍摄照片并显示到 ImageView控件中
在前面的一篇文章中曾介绍过简单的开启相机照相功能,详见 Android简单调用相机Camera功能,实现打开照相功能 ,这一次就会将前面拍摄的照片显示到ImageView中,形成一个完整的效果 看实例 ...
- [C#] 一款代码注释清理工具
[C#] 一款代码注释清理工具 在程序开发过程中,很多时候我们都会在代码中进行注释,以便大家更容易理解或能更直观明白某个类或方法是用来做什么的,我们就会用注释 就以C#为列子,注释符大致为'//' ...
- Scala学习笔记——函数式对象
用创建一个函数式对象(类Rational)的过程来说明 类Rational是一种表示有理数(Rational number)的类 package com.scala.first /** * Creat ...
- intelliJ idea快捷方式
Ctrl+Shift+N,可以快速打开文件 Ctrl+Alt+L,格式化代码 Ctrl+R,替换文本Ctrl+F,查找文本 Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件 Ctrl+ ...
- 5 -- Hibernate的基本用法 --5 3 改变持久对象状态的方法
1. 持久化实体 Serializable save(Object obj) : 将obj对象变为持久化状态,该对象的属性将被保存到数据库. void persist(Object obj) : 将o ...
- centos7设置时间和时区
1.安装ntp服务软件包:yum install ntp 2.将ntp设置为缺省启动:systemctl enable ntpd 3.修改启动参数,增加-g -x参数,允许ntp服务在系统时间误差较大 ...
- OpenGL——旋转的六边形(动画)
代码: #include<iostream> #include <math.h> #include<Windows.h> #include <GL/glut. ...
- 解决在html中引入font-awesome的css文件后, 图标显示不出来
今天小颖在做项目时,需要在html文件中引入font-awesome.min.css,但是引入后: 以前小颖在用font-awesome库里的图标时,都是直接从node中下包,然后在main.js中引 ...