react子组件如何向父组件传值
来源:互联网 发布:淘宝的免费开店在哪里 编辑:程序博客网 时间:2024/06/06 09:02
转自:http://blog.csdn.net/qizhiqq/article/details/52384554
黑色框为父,绿色框为子,红色框为孙子。父向子孙传值用props;子孙向父传值,要在父设置接收函数和state,同时用props将函数名传入子孙。(总的来说就是给子组件传入父组件的方法,在子组件中调用)
var Grandson = React.createClass({ render: function(){ return ( <div style={{border: "1px solid red",margin: "10px"}}>{this.props.name}: <select onChange={this.props.handleSelect}> <option value="男">男</option> <option value="女">女</option> </select> </div> ) }});var Child = React.createClass({ render: function(){ return ( <div style={{border: "1px solid green",margin: "10px"}}> {this.props.name}:<input onChange={this.props.handleVal}/> <Grandson name="性别" handleSelect={this.props.handleSelect}/> </div> ) }});var Parent = React.createClass({ getInitialState: function(){ return { username: '', sex: '' } }, handleVal: function(event){ this.setState({username: event.target.value}); }, handleSelect: function(event) { this.setState({sex: event.target.value}); }, render: function(){ return ( <div style={{border: "1px solid #000",padding: "10px"}}> <div>用户姓名:{this.state.username}</div> <div>用户性别:{this.state.sex}</div> <Child name="姓名" handleVal={this.handleVal} handleSelect={this.handleSelect}/> </div> ) }});React.render( <Parent />, document.getElementById('test'));
0 0
- react子组件如何向父组件传值
- react子组件如何向父组件传值
- React 子组件向父组件传值
- React子组件向父组件传值
- 子组件向父组件传值
- React Native 的子组件向父组件传值的简单例子
- React简单的分页代码实现(子组件向父组件传值)
- React笔记(二):子组件向父组件传值
- 子组件向父组件传值,父组件向子组件传值
- VUE 父组件向子组件传值,子组件向父组件传值
- vue-prop父组件向子组件进行传值
- vue-子组件向父组件传值
- vue子组件向父组件传值问题
- Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?
- React 父组件获取子组件节点的ref值
- React-Native-ListView、ListViewItem(子、父组件互相传值)
- React 的数据流动(反向由子组件向父组件传递数据)
- React 组件之间 事件调用(父组件调用子组件)
- 排序和查找算法总结
- Android中循环获取图片资源Id并运用到GridView等的适配器之中
- 2016年第七届山东省ACM省赛题解
- 《Linux与shell脚本编程大全》笔记之shell命令补充
- SQL之case when then用法
- react子组件如何向父组件传值
- Effective Java读书笔记八(Java Tips.Day.8)
- QT5实现简单的TCP通信
- Redis初探04——Redis的list类型及操作
- R语言绘制K线图
- Android自定义加载动画库zLoading
- 算法思想汇总(日后补充)
- 欢迎使用CSDN-markdown编辑器
- 【php学习之路】水印功能的基本实现