標籤：
<!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>實現效果如下：
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>使用React實作類別似快遞單號查詢效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
