react.js 测试-阿里云开发者社区

react.js 测试

2017-04-08 630

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： hellow //创建组建 var TestButtonComponent = React.

<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>

react.js 测试

热门文章

最新文章

相关课程

相关电子书