首页 > 代码库 > 夺命雷公狗-----React---21--小案例之心情留言板

夺命雷公狗-----React---21--小案例之心情留言板

2024-08-21 21:54:09   220人阅读

技术分享

 

这个功能如果是用传统型的jquery来写都要花费很多时间才可以完成的案例，

亲测jquery配合bootstrap来写和bootstrap配合react.js来写，不知不觉中有点震惊。。。

 

jquery版本代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jq18m.js"></script>
    <script src="./js/bootstrap.js"></script>
    
</head>
<body>
    <div class="container">
        <br><br>
        <div class="well">
            <textarea class="form-control" rows="10"></textarea>
            <br> 
            <span>150</span>
            <button class="btn btn-default btn-primary pull-right" id="sub">OK</button>
            <button class="btn btn-default pull-right" id="pic">Add Pic</button>
        </div>
    </div>
    <script>
        //$(‘#sub‘).attr(‘disabled‘,true);
        $(‘#sub‘).prop(‘disabled‘,true);
        $(‘textarea‘).on(‘input‘,function(){
            //alert(‘test‘);
            var len = $(this).val().length;
            if(len>0){
                $(‘#sub‘).prop(‘disabled‘,false);

            }else{
                $(‘#sub‘).prop(‘disabled‘,true);
            }
            $(‘span‘).text(150 - len);
        });

        $(‘#pic‘).on(‘click‘,function(){
                $(this).toggleClass(‘uppic‘);
                var len = $(‘textarea‘).val().length;
                if($(this).hasClass(‘uppic‘)){
                    $(‘span‘).text(150 - len - 24);
                    //已经upload了图片
                    $(this).text(‘√ upload_OK‘);
                }else{
                    //还没upload图片
                    $(this).text(‘Add Pic‘);
                    $(‘span‘).text(150 - len);
                }

                //判断下看下是否有内容
                var lens = $(‘span‘).text();
                if(lens< 150){
                    $(‘#sub‘).prop(‘disabled‘,false);
                }else{
                    $(‘#sub‘).prop(‘disabled‘,true);
                }
            });
    </script>
</body>
</html>

 

 

react.js版本如下：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="./css/bootstrap.css">
        <script src="./js/jq11_1.js"></script>
        <script src="./js/bootstrap.js"></script>
        <script src="./js/react.js"></script>
        <script src="./js/react-dom.js"></script>
        <script src="./js/browser.min.js"></script>
        <style>
            *{ margin:0px;  padding:0px;}
            
        </style>
    </head>
    <body>
        <div id="dome" class="container"></div>
        <div id="test"></div>
        <script type="text/babel">
            var Fix = React.createClass({
                getInitialState:function(){
                    return{
                        text:‘‘,//表示大文本域的内容
                        uploaded:false //表示是否上传图片，默认否
                    }
                },
                //计算剩余字数的方法
                fontCount:function(){
                    //总数：150字
                    //要考虑text的长度和是否已经上传图片了
                    if(this.state.uploaded){
                        return 150 - 25 -this.state.text.length;
                    }else{
                        return 150 - this.state.text.length;
                    }
                },
                handleChange:function(e){
                    this.setState({
                        text:e.target.value
                    });

                },
                handleUpload:function(){
                    this.setState({
                        uploaded:!this.state.uploaded
                    });
                },
                render:function(){
                    return(
                        <div>
                            <br /><br />
                            <div className="well">
                                <textarea className="form-control" rows="10" onChange={this.handleChange} >
                                {this.props.text}</textarea>
                                <br /> 
                                <span>{this.fontCount()}</span>
                                <button className="btn btn-default btn-primary pull-right" 
                                disabled={this.state.text.length== 0 && !this.state.uploaded}>OK</button>
                                <button className="btn btn-default pull-right" onClick={this.handleUpload}>
                                {this.state.uploaded ? "√ upload_OK":"Add Pic"}</button>
                            </div>
                        </div>
                    );
                }
            });
            ReactDOM.render(
                <Fix />,
                document.getElementById(‘dome‘)
            );
        </script>
    </body>
</html>

 

效果相同，但是代码量和逻辑处理react完胜。。。。。。。。。。。

 

夺命雷公狗-----React---21--小案例之心情留言板


联系
我们