使用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> ~~~