react.js測試

wensongyu發表於2017-04-08
ReactJS

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


相關文章