React 组件之间 事件调用(父组件调用子组件)
2016-08-16 11:29
543 查看
<!DOCTYPE html> <html> <head> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var HelloMessage = React.createClass({ getDragonKillingSword: function(){ alert("OK"); }, render: function() { return <div> <h1>Hello {this.props.name}</h1> <button onClick={this.getDragonKillingSword}>OK</button></div> } }); var ImDaddyComponent = React.createClass({ getDS: function(){ //父组件调用子主键进行通信 this.refs.getSwordButton.getDragonKillingSword(); }, render: function(){ return ( <div> <HelloMessage name="John" ref="getSwordButton" /> <button onClick={this.getDS}>OK2</button> </div> ); } }); ReactDOM.render( <ImDaddyComponent />, document.getElementById('example') ); </script> </body> </html>
相关文章推荐
- Windows环境下安装React Native踩的那些坑
- [React Fundamentals] Component Lifecycle - Updating
- [React Fundamentals] Component Lifecycle - Mounting Usage
- [React Fundamentals] Component Lifecycle - Mounting Basics
- React高级性能优化
- 《React-Native系列》16、 RN组件之ListView
- React Native之React速学教程(下)
- React Native之React速学教程(中)
- React Native之React速学教程(上)
- React Native调试技巧与心得
- React Native布局详细指南
- React Native应用部署/热更新-CodePush最新集成总结
- 一看就懂的ReactJs入门教程(精华版)
- React 入门实例教程
- React Native添加Android原生模块
- 【React Native 安卓开发】----(mac下开发环境配置)【第一篇】
- React Native错误汇总(持续更新)
- React Native错误汇总(持续更新)
- React Native自定义导航栏
- React Native自定义导航栏