<! 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>
<! 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>
<! 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}/> <ButtonTypStart 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
