<html>
<head> <title>hellow</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> <meta charset="utf-8" /> </head> <body> <div id="root"> </div> <script type="text/jsx"> //创建组建 var TestButtonComponent = React.createClass({ handleClick:function(event){ var tipsE = React.findDOMNode(this.refs.tips); if(tipsE.style.display === 'none'){ tipsE.style.display = 'inline'; }else{ tipsE.style.display = 'none'; } event.stopPropagation(); //阻止事件冒泡 event.preventDefault(); //阻止默认事件 }, render:function(){ return ( <div> <button onClick={this.handleClick}>显示|隐藏</button><span ref="tips">测试button</span> </div>); } }); var TestInputComponent = React.createClass({ getInitialState:function(){ return { inputContent:'ii' }; }, handleChange:function(event){ this.setState({ inputContent:event.target.value }); }, render:function(){ return ( <div> <input type="text" onChange={this.handleChange} /> <span>{this.state.inputContent}</span> </div> ); } }); //调用组建 React.render( <div> <TestButtonComponent /> <br/> <br/> <br/> <TestInputComponent /> </div>, document.getElementById('root') ); </script> </body><html>