你的位置:首页 > Java教程

[Java教程]React.js再探(四)


不知道看官们还记不记得上一节的内容,关于生命周期的。我们来个例子重温且练习一下。

传送门:http://www.cnblogs.com/galenyip/p/4574400.html

 

我们来实现一下时钟的功能,要求当秒是“0”的时候,字体变为红色。注意用componentWillUpdate实现。

       当秒是0   变为

 1 <!DOCTYPE html> 2 <html> 3 <head> 4   <meta charset="utf-8"> 5   <title>EzDigiClockComp</title> 6   <script src="lib/react.min.js"></script> 7   <script src="lib/JSXTransformer.js"></script> 8   <!--组件样式--> 9   <style>10     @font-face {11       font-family:"LED";12       src:url("font/LED.eot?") format("eot"),13         url("font/LED.woff") format("woff"),14         url("font/LED.ttf") format("truetype"),15         url("font/LED.svg#LED") format("svg");16       font-weight:normal;17       font-style:normal;18     }19     .ez-digi-clock{20       font-family : LED;21       font-size : 40px;22       background : #70d355;23       width: 300px;24       height:60px;25       line-height : 60px;26       text-align : right;27       padding : 10px;28       letter-spacing : 5px;29     }  30   </style>31 </head>32 <body>33   <div id="content"></div>34   <script type="text/jsx">35     //获取并格式化当前时间36     var _getTime = function(){37       var _=['00','01','02','03','04','05','06','07','08','09'], //补零38         d = new Date(),39         h = d.getHours(),40         m = d.getMinutes(),41         s = d.getSeconds();42       43       return [_[h]||h,_[m]||m,_[s]||s].join(":");44     };45     //组件定义46     var EzDigiClockComp = React.createClass({47       //设置状态变量初始值48       getInitialState : function(){49         return {50           time : _getTime(),51           myStyle: {52             color: "black"53           }54         };55       },56       //初次渲染后React执行此方法57       componentDidMount : function(){58         //设置定时器59         this.timer = setInterval(function(){60           this.setState({time:_getTime()});61         }.bind(this),1000);62       },63       componentWillUpdate : function(m,n){64         if(n.time.substring(n.time.length-1)==="0") n.myStyle = {color : "red" }65         else n.myStyle = {color: "black"}66       },67       //即将从DOM树移除时执行此方法68       componentWillUnmount : function(){69         //删除定时器70         clearInterval(this.timer);71       },72       render : function(){73         return   <div className="ez-digi-clock" style={this.state.myStyle}>74               {this.state.time}75             </div>;76       }77     });78     //渲染79     React.render(80       <EzDigiClockComp />, 81       document.querySelector("#content"));82     83   </script>84 </body>85 </html>

 

这里有个坑,不知道看官们踩到没。

即在componentWillUpdate中,如果我是用this.state.time去取值,而不是n.time去取,发现遇到了问题,实现不了效果,于是我加了console进去,发现this.state.time取到的还是之前的值。

即:

1 componentWillUpdate : function(m,n){2         console.log(this.state.time)3         if(this.state.time.substring(this.state.time.length-1)==="0") this.state.myStyle = {color : "red" }4         else this.state.myStyle = {color: "black"}5         console.log(this.state.time)6       }

 

这点上面,我表示很疑惑哎,晚点去论坛上问问,如果看官们知道的话,帮我解解惑吧。。。。

 

那今天还是要学学新东西的。

访问DOM

我们在React中,还是需要去访问Virtual Dom的,因为我们这里已经没有了JQ,有时也不是访问实时的DOM节点,那在React中,我们怎么访问React元素的DOM对象呢?

 

答案是:ref属性和React.findDOMNode(component)

ref:对于我们要访问的DOM,那么我们就对那个DOM设置ref属性

如:

1 //JSX2 <input type="text" defaultvalue="beijing" ref="q" placeholder="请输入城市拼音,如:beijing">

声明了ref属性的DOM,我们通过this.refs获取到组件对象,比如this.refs.q,我们就获取到了这个组件对象,记着这时还不是获取到DOM

 

React.findDOMNode(component):这个才是获取DOM的操作。参数component是获取到的组件对象,而我们上一步的this.refs.q就是获取到的组件对象。

对于已经渲染到DOM树中的React元素,findDOMNode()方法则获取到的对应的DOM节点对象。之后就可以用标准的DOM API去操作了。

 

那下面我们来实践一下,要的效果是让输入框自动获取焦点,结合上一节中的componentDidMount()使用。

看官先自己思考下哈,然后看代码吧。

 1 <!DOCTYPE html> 2 <html> 3 <head> 4   <meta charset="utf-8"> 5   <title>EzComp</title> 6   <script src="lib/react.js"></script> 7   <script src="lib/JSXTransformer.js"></script> 8   <!--组件样式--> 9   <style>10     .ez-weather{11       background : black;12       color:white;13       padding:10px;14     }15     .ez-search{16       display: flex;17       flex-flow:row nowrap;    18     }19     .ez-search input{20       flex : 1 0 auto;21     }22     .ez-search button{23       width:100px;24       margin:0px 10px;25     }26   </style>27 </head>28 <body>29   <div id="content"></div>30   <script type = "text/jsx">31     //定义组件32     var EzWeatherComp = React.createClass({33       //设置初始状态34       getInitialState : function(){35         return {waiting:false};36       },37       componentDidMount: function(){38         React.findDOMNode(this.refs.q).focus()39       },40       render : function(){41         42         return   <div className="ez-weather">43               <div className="ez-search">44                 <input type="text" defaultValue="beijing" ref="q"45                   placeholder="请输入城市拼音,如:beijing"/>46               </div>47              </div>;48       }49     });50     //渲染51     React.render(52       <EzWeatherComp/>,53       document.querySelector("#content"));54 55   </script>56 </body>57 </html>

 

好吧,其实还是比较简单的。。。

 

既然上面用到了输入框这些表单,不知道看官注意到没,默认值我们是用的defaultValue,而不是value,这是React规定的 - -。。。

还有其他几个也提一下:

复选按钮:用defaultChecked而不是checked

1 //JSX2 <input type="checkbox" defaultChecked=""> 

 

下拉选项:用defaultValue而不是selected

1 //JSX2 <select defaultValue="A">3   <option value="A">China</option>4   <option value="B">India</option>5   <option value="C">Japan</option>6 </select>

 

好了,本篇就这些。

今天刚入职新公司,心情复杂哎~