学习react-简单小案例--点击事件
Posted 大智如蠢
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习react-简单小案例--点击事件相关的知识,希望对你有一定的参考价值。
<html> <head> <title></title> <meta charset="UTF-8"/> <script src="js/react.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/react-dom.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/browser.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .bodystyle{ width: 100%; height: 100%; background: brown; } .borderstyle{ border: 1px solid #ccc; background: #ffffff; width: 12%; margin: 10px; float: left; } </style> </head> <body> <div id="container"></div> </body> <script type="text/babel"> var Crud = React.createClass({ edit:function(){ alert(‘点击编辑了‘); }, del:function(){ alert(‘点击删除了‘) }, render:function(){ return ( <div className="borderstyle"> <div>{this.props.children}</div> <button onClick={this.edit}>编辑</button> <button onClick={this.del}>删除</button> </div> ); } }); ReactDOM.render( <div className="bodystyle"> <Crud>Hello world</Crud> <Crud>Hello react</Crud> </div>, document.getElementById(‘container‘) ); </script> </html>
以上是关于学习react-简单小案例--点击事件的主要内容,如果未能解决你的问题,请参考以下文章