react native 子控件传递数据给父控件
2017-03-24 15:47
435 查看
/** * Created by fanxiaole on 17/3/24. * 需求 在子控件(select)中选择性别 在父控件(form)中获取这个值并提交 * */ //步骤 //1.创建父控件(form) 并添加子控件 同时利用state属性监控子控件中值得变化 创建修改父控件中state属性的方法 //2.将父控件中修改state属性的方法传递给子控件 //3.创建子控件 并在其中将子控件属性handleSelectState 交给onChange方法去改变 var SelectComponent = React.createClass({ render : function () { return <select onChange={this.props.handleSeclectState}> <option value="0">葵花宝典</option> <option value="1">辟邪剑法</option> <option value="2">鲁冰逊漂流记</option> <option value="3">十万个为什么</option> </select> } }); var ParentComponent = React.createClass({ getInitialState : function(){ return {book : '0'} }, handleChange : function (e) { console.log(e.target.value); this.setState({book : e.target.value}); }, handleSubmit :function (e) { //剔除form的默认提交 e.preventDefault() alert(this.state.book); }, render : function () { return <form onSubmit={this.handleSubmit}> <SelectComponent handleSeclectState = {this.handleChange}></SelectComponent><br/> <button type = "submit">提交</button> </form > } }); ReactDOM.render(<ParentComponent/>,document.body);
相关文章推荐
- React Native原生模块向JS传递数据的几种方式(Android)
- 详解react native页面间传递数据的几种方式
- React Native 基础篇之Navigator页面的跳转与数据的传递
- React-Native进阶_6.导航 Naviagtion传递数据并展示
- 手把手教你iOS如何调用React Native,即是iOS与RN的交互,将推送数据传递RN
- ReactNative之刷新机制和界面间的数据传递
- 从零开始 React Native (5) React 数据传递_表单_函数复用_动画
- React Native学习笔记之--组件之间数据的传递和跳转
- react-native ListView 通过Navigator传递数据
- 【React Native开发】React Native控件之Image组件讲解与美团首页顶部效果实例(10)
- React Native ——实现一个简单的抓取github上的项目数据列表
- 【React Native开发】React Native控件之TextInput组件讲解与QQ登录界面实现(11)
- 【React Native开发】React Native控件之Image组件讲解与美团首页顶部效果实例(10)
- 【React Native开发】React Native控件之ScrollView组件讲解(14)
- React Native 教程 demo1 认识js与app原生控件
- 【Qt】窗体间传递数据(跨控件跨类),三种情况与处理方法
- react native Image 控件显示图片方式总结
- react-native试玩(6)-日期选择控件
- react-native试玩(13)-选择控件
- Android使用webview控件加载本地html,通过Js与后台Java实现数据的传递