这个功能如果是用传统型的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--小案例之心情留言板的更多相关文章

  1. 夺命雷公狗—angularjs—21—解决angularjs压缩问题

    我们在实际的开发中往往离不开js的代码压缩,因为这样可以减轻服务器的压力,是的的方法如下所示: <!DOCTYPE html> <html lang="en" n ...

  2. 夺命雷公狗-----React---12--添加类和样式

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  3. 夺命雷公狗-----React---11--添加css样式的方法

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  4. 夺命雷公狗-----React---10--组建嵌套进行数据遍历

    先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. 夺命雷公狗-----React---9--map数据的遍历

    比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...

  6. 夺命雷公狗-----React---8--react官方提供的组建实现双向绑定

    首先要引入她.. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. 夺命雷公狗-----React---7--组建的状态props和state

    props:组建初始要渲染的数据,他是不可以改变的 state:组建状态发生改变,调用render重新渲染数据 我们来写一个例子: <!DOCTYPE html> <html lan ...

  8. 夺命雷公狗-----React---6--props多属性的传递

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 夺命雷公狗-----React---5--props对象的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

随机推荐

  1. （转）完全用GNU/Linux工作 by 王珢

    完全用GNU/Linux工作 王珢      (看完这篇博文,非常喜欢王珢的这篇博客,也我坚定了学gnu/linux的决心,并努力去按照国外的计算机思维模式去学习编程提高自己.看完这篇文章令我热血沸腾 ...

  2. 利用JS实现自定义滚动条

    一般默认的滚动条会比较丑,我们可以用简单的js实现自定义滚动条的功能: 代码如下: <!doctype html> <html> <head> <meta c ...

  3. 无聊拆中国银行密码器和农业银行U盾

    原始状态 不知从何下手,直接斜口钳暴力剪开 开始露出电路板了,继续拆 拆完是这样的,屏幕没有焊接,直接靠外壳压上去的 背面图 相对而言,农行的就很好拆 后盖很好撬开 前面就是按键,没什么,屏是1286 ...

  4. BSBuDeJie_02

    一 左边的类别数据 1 模型 和 字典中的数据对应 /* id */ @property (nonatomic, assign) NSInteger *id; /* 总数 */ @property ( ...

  5. php上传大文件时，服务器端php.ini文件中需要额外修改的选项

    几个修改点: 1.upload_max_filesize 上传的最大文件 2.post_max_size 上传的最大文件 3.max_execution_time 修改为0表示无超时,一直等待 4.m ...

  6. Multiprocessor Operating System Design Considerations SYMMETRIC MULTIPROCESSORS

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION An SMP operating syst ...

  7. ruby 随笔

    1.A Server is running获取PID lsof -wni tcp:3000关闭PID kill -9 pID2.rubymine注册码http://idea.lanyus.com/ 3 ...

  8. Sourceinsight最佳配色方案及颜色字体调整方法

    在Ubuntu下面用Gedit有一款比较好看的配色,应该是Darkblue.按照那个样子在SI里面做了一个差不多的,按个人喜好,背景色换成黑色,如下所示: 配色的方案文件可以从此处链接免费下载: 配色 ...

  9. shell (check return of each line)and sudoer

    shell result from cmdline echo $? if 0 then success ;else failure (shell 执行每部返回值,rm -rf 错误,打包不能覆盖) 解 ...

  10. JavaScript之ES6

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...