標籤：
1.顯示隱藏
2.輸入框輸入內容，立即顯示出來
代碼如下：
注意：版本
React v15.0.1
ReactDOM v15.0.1
browser.min.js是編譯檔案，將代碼解析為瀏覽器識別的js
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <script type="text/javascript" src="react.js"></script> <script type="text/javascript" src="react-dom.js"></script> <script type="text/javascript" src="browser.min.js"></script></head><body><div id="container"></div><script type="text/babel"> var TestClickComponent=React.createClass({ handleClick:function(event){ var tip=this.refs.tip; if(tip.style.display=="none"){ tip.style.display=‘inline‘; }else{ tip.style.display=‘none‘; } event.stopPropagation(); event.preventDefault(); }, render:function(){ return( <div> <button onClick={this.handleClick}>顯示|隱藏</button><span ref="tip">測試</span> </div> ) } }); var TestInputComponent=React.createClass({ getInitialState:function(){ return{ inputContent:‘‘ } }, changeHandler:function(event){ this.setState({ inputContent:event.target.value }) event.stopPropagation(); event.preventDefault(); }, render:function(){ return( <div> <input type="text" onChange={this.changeHandler}/> <span>{this.state.inputContent}</span> </div> ) } }); ReactDOM.render(<div> <TestClickComponent/> <TestInputComponent/> </div>,document.getElementById("container"));</script></body></html>
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
