使用React實現類似快遞單號查詢效果 · 致力于web前端技術撰寫

~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="關鍵詞一，關鍵詞二"> <meta name="Description" content="網站描述內容"> <meta name="Author" content="劉艷"> <title></title> </head> <body> <div id = "example"></div> </body> </html> <script src = "build/jquery-1.11.2.min.js"></script> <script src = "build/react.js"></script> <script src = "build/react-dom.js"></script> <script src = "build/browser.min.js"></script> <script type="text/babel"> var MyComponent = React.createClass({ handKeyUp: function () { this.refs.clone.innerHTML = this.refs.target.value; }, render: function () { return (<div> <div ref = "clone" style = {{height:40+'px',fontSize:28+'px'}}></div> <input type = "text" ref = "target" onKeyUp = {this.handKeyUp}></input> </div>); } }); ReactDOM.render(<MyComponent></MyComponent>,document.querySelector("#example")); </script> ~~~ 實現效果如下：? ![](https://box.kancloud.cn/2016-04-07_5706040061a49.jpg)? CSS美化略過，因為主要是學習React使用。? 另一種更為簡便的寫法如下，充分利用react組件的state： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="關鍵詞一，關鍵詞二"> <meta name="Description" content="網站描述內容"> <meta name="Author" content="劉艷"> <title></title> </head> <body> <div id = "example"></div> </body> </html> <script src="build/react.js"></script> <script src="build/react-dom.min.js"></script> <script src="build/browser.min.js"></script> <script type="text/babel"> var Input = React.createClass({ getInitialState: function(){ return {value: "Hello"}; }, handleChange: function (event) { this.setState({value: event.target.value}); }, render: function(){ var value = this.state.value; return ( <div> <p>{value}</p> <input type = "text" value = {value} onChange = {this.handleChange} /> </div> ); } }); ReactDOM.render( <Input />, document.querySelector("#example") ) </script> ~~~