react.js 测试

2022-11-07 08:05:56

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