React binding Events

1. Show hidden

2. Enter the contents of the input box and display it immediately.

The code is as follows:

Note: version

React v15.0.1

Reactdom v15.0.1

Browser.min.js is a compiled file that parses the code into a browser-aware JS

<! DOCTYPE html>"en">"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>"Container"></div><script type="Text/babel">varTestclickcomponent=React.createclass ({handleclick:function (Event){      vartip= 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}> Show | Hide </button><spanref="Tip"> Testing </span> </div>          )      }  }); varTestinputcomponent=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/> </d Iv>,document.getelementbyid ("Container"));</script></body>
React binding Events