I. Non-controllable components and controllable components: <input type= "text" defaultvalue= "HelloWorld"/> Data write dead. Controllable components: <input type= "Text" defaultvalue={this.state.value}/> why components are controllable: data stream data that conforms to react is stored in state for ease of use for processing data
Non-controllable component code:
<! DOCTYPEHTML> <HTMLlang="ZH-CN"> <Head> <Metacharset="UTF-8"> <title> Form Details </title> </Head> <Body> <Scriptsrc="./build/react.js"></Script> <Scriptsrc="./build/jsxtransformer.js"></Script> <Scripttype="TEXT/JSX">/*var MyForm = React.createclass ({render:function () {return <input type= "text" DEFAULTV Alue= "helloworld!" />}}); */varMyForm=React.Createclass({submithandler:function(event) {Event.preventdefault ();varHelloto =React.Finddomnode( This.Refs. Helloto).value; alert (Helloto); }, Render:function() {return<formonsubmit={ This.submithandler}> <inputtype="Text"ref="Helloto"defaultvalue="Hello World"/><BR/> <Buttontype="Submit">speak</Button> </form>});React.Render(<MyForm></MyForm,Document.Body ); </Script> </Body> </HTML>
Controllable Component code:
<! DOCTYPEHTML> <HTMLlang="ZH-CN"> <Head> <Metacharset="UTF-8"> <title> Form Details </title> </Head> <Body> <Scriptsrc="./build/react.js"></Script> <Scriptsrc="./build/jsxtransformer.js"></Script> <Scripttype="TEXT/JSX">varMyForm=React.Createclass({getinitialstate:function() {return{Helloto:"HelloWorld" }; }, HandleChange:function() { This. setState ({Helloto:Event.Target.value }); }, Submithandler:function(event)
{Event.preventdefault (); Alert This. State.Helloto); }, Render:function() {return<formonsubmit={ This.submithandler}> <inputtype="Text"value={ This. State.Helloto}onchange={ This.handlechange}/><BR/> <Buttontype="Submit">speak</Button> </form>});React.Render(<MyForm></MyForm,Document.Body ); </Script> </Body> </HTML>
Ii. use of different form elements <label htmlfor= "name" >Name</label> <input type= "checkbox" value= "A" checked={ this.state.checked} onchange={this.handlechange}/> <textarea Value={this.state.helloto} onchange={ This.handlechange}/> <select Value={this.state.helloto} onchange={this.handlechange}> <option value= " The One ">1</option></select> example code is as follows:
<! DOCTYPEHTML> <HTMLlang="ZH-CN"> <Head> <Metacharset="UTF-8"> <title> Form Details </title> </Head> <Body> <Scriptsrc="./build/react.js"></Script> <Scriptsrc="./build/jsxtransformer.js"></Script> <Scripttype="TEXT/JSX">varMyForm=React.Createclass({getinitialstate:function() {return{username:"",Gender:"Man",checked:true }; }, Handleusernamechange:function() { This. setState ({username:Event.Target.value }); }, Handlegenderchange:function(event) { This. setState ({Gender: Event.Target.value }); }, Handlecheckboxchange:function(event) { This. setState ({checked: Event.Target.checked }); }, Submithandler:function() {Event. Preventdefault ();Console. log ( This. State); }, Render:function() {return<formonsubmit={ This.submithandler}> <labelhtmlfor="username"> Please enter your user name: </label> <inputid="username"type="Text"value={ This. State.username}onchange={ This.handleusernamechange}/><BR/> <Selectvalue={ This. State.Gender}onchange={ This.handlegenderchange}><optionvalue="Man"> Male </option> <optionvalue="Woman"> Female </option></Select> <BR/> <labelhtmlfor="checkbox"> Agree User agreement: </label> <inputid="checkbox"type="checkbox"value="Agree"checked={ This. State.checked}onchange={ This.handlecheckboxchange}/> <ButtonTyp